IFRAME embeds

Verdocs' Web components provide highly customizable controls for building e-Signing applications. However, some legacy applications and environments such as Wordpress do not yet support Web components. To provide support for these environments, our six most popular components may be embedded via IFRAME links.

To do this, use code such as the following:

<iframe
  src="https://app.verdocs.com/embeds/sign/ENVELOPE_ID/ROLE_NAME/INVITE_CODE"
  style="width: 100%; height: 100%"></iframe>

Adjust the style attribute to match your requirements. Note that with IFRAMEs you will have no styling/customization options, and all parameters must be specified in the URL.

We offer six embeds via the following URLs:

• VerdocsAuth: /embeds/auth
• VerdocsBuild: /embeds/build/TEMPLATE_ID
• VerdocsView: /embeds/view/ENVELOPE_ID
• VerdocsPreview: /embeds/preview/TEMPLATE_ID
• VerdocsSend: /embeds/send/TEMPLATE_ID
• VerdocsSign: /embeds/sign/ENVELOPE_ID/ROLE_NAME/INVITE_CODE

Events

Your page can't see what happens inside an IFRAME, so each embed posts a message to its parent window as things happen, such as a signer finishing. Every message has source (always "verdocs"), version (currently 1), embed (which embed sent it, such as "sign"), and event, plus the ids listed below. Messages only include ids and event names, so use the ids with the API or webhooks when you need more detail.

Check that a message came from the host in your IFRAME's src before acting on it:

window.addEventListener('message', (e) => {
  if (e.origin !== 'https://app.verdocs.com' || e.data?.source !== 'verdocs') {
    return;
  }

  if (e.data.event === 'submitted') {
    // The signer finished, so close the dialog or move on to the next step
  }
});

later means the signer chose to finish later.

To fit the IFRAME to its content, set its height from resize. It reports the height the embed needs to show everything without scrolling, and never less than the IFRAME's current height, so start small and let it grow. Sign and View scroll on their own at any height, so with those you only need this if you'd rather your page do the scrolling.

const frame = document.getElementById('verdocs-frame');

window.addEventListener('message', (e) => {
  if (e.origin === 'https://app.verdocs.com' && e.data?.source === 'verdocs' && e.data.event === 'resize') {
    frame.style.height = `${e.data.height}px`;
  }
});