Get signature field coordinates

I’m working with a Vue.js Nuxt 3 environment and what we are trying to do, it’s to get the specific coordinates from where the signatures will be applied, but when I call the getFields() class it just returns an empty array. I need a way to either set and get the coordinates to send a signature so my users can then sign on to my system or a way to detect from a DOCX to PDF template conversion if the template requires a Signature.

right now I’m just creating the template and filling in all the variables, but the last peace it’s getting the signature positions.

here it’s part of the code.

onMounted(() => {
        path: '../../webviewer',
        disabledElements: [
        preloadWorker: 'office',
        fullAPI: true,
        initialDoc: props.document
    }, viewer.value)
        .then(instance => {
            viewerInstance = instance;
            const { documentViewer } = instance.Core;
            if (props.document == null) {
                    confirmBtnText: 'Okay',
                    title: "Oops, something went wrong",
                    message: 'We're sorry, the contract it's not available just yet.',
                    onCancel: null,
                    onConfirm: null,

            documentViewer.addEventListener('documentLoaded', async () => {
                await documentViewer.getDocument().getDocumentCompletePromise();

                const contract = documentViewer.getDocument();
                const keys = await contract.getTemplateKeys();
                contractKeys.value = keys.reduce((o, key) => ({ ...o, [key]:''}), {});

                document.getElementById("key-val-title").innerText = "Contract Variables:";
                isLoading.value = false;

const autoFill = async () => {
    const {documentViewer, annotationManager} = viewerInstance.Core
    const doc = await documentViewer.getDocument()

    let fM = new viewerInstance.Core.Annotations.Forms.FieldManager(annotationManager);
    console.log(fM.getFields() );
// here only returns an empty array.

    await doc.applyTemplateValues(JSON.stringify(contractKeys.value));
    await doc.getDocumentCompletePromise();

and this is the template that’s being display

    <aside class="autofill">
        <h2 id="doc-title">Smart Contract</h2>
        <h1 id="key-val-title">Preparing Visualization...</h1>
        <p id="current-status"></p>
        <form id="autofill-form" @submit.prevent="autoFill">
            <div v-for="(value, index) in contractKeys">
                <BaseInput inputClass="value-field" v-model="contractKeys[index]" :type="getType(index)"
                    :name="`${index}`" :label="getLabel(index)" required >
            <baseButton v-if="!isLoading" type="submit" variant="primary" name="Autofill">Fill Variables.
    <div id="webviewer" ref="viewer"></div>


Thank you for contacting us regarding Webviewer.

To get the coordinates of the signatures, you can use the annotationChanged event in annotationManager.

 annotationManager.addEventListener('annotationChanged', (annotations, action, info) => {
    // the annotations array should contain the information signature you just created, including coordinates, width and height

Furthermore, you could check the guide at PDFTron Systems Inc. | Documentation to convert coordinates between the Viewer and the PDF if you need to.

Please let us know if this resolves your issue, thank you.