<script src="https://your-app.com/js/docutrust-embed.js"></script>

<docuseal-form
  data-src="https://your-app.com/s/aB3kL9mNpQ"
  data-email="jane.doe@example.com"
  data-name="Jane Doe"
  data-role="Recipient"
  data-language="en"
  data-with-title="true"
  data-with-send-copy-button="true"
  data-with-download-button="true"
  data-allow-to-resubmit="false"
  data-go-to-last="true"
  data-autoscroll="true"
  data-expand="true"
  data-completed-redirect-url="https://your-app.com/thank-you"
  data-values='{"Full Name": "Jane Doe", "Email": "jane.doe@example.com"}'
  data-metadata='{"customer_id": "cust_8472", "plan": "enterprise"}'
></docuseal-form>

<docuseal-builder
  data-token="eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNSIsImlzcyI6ImRvY3V0cnVzdCIsImF1ZCI6ImJ1aWxkZXIiLCJhaWQiOiIxIiwiaWF0IjoxNzQ0MTk1OTIwLCJleHAiOjE3NDQyMTAzMjAsIm9wdHMiOnsiYXV0b3NhdmUiOnRydWUsInByZXZpZXciOnRydWUsImZpZWxkcyI6W119fQ.abc123"
  data-language="en"
  data-autosave="true"
  data-preview="true"
  data-with-title="true"
  data-with-send-button="true"
  data-with-recipients="true"
></docuseal-builder>

DocuTrust.configure({
  host: 'https://your-app.com'
});

const form = DocuTrust.mount({
  element: '#signing-container',
  submitterSlug: 'aB3kL9mNpQ',
  email: 'jane.doe@example.com',
  withTitle: true,
  withDownloadButton: true,
  withSendCopyButton: true,
  allowToResubmit: false,
  language: 'en',
  values: { 'Full Name': 'Jane Doe', 'Email': 'jane.doe@example.com' },
  completedRedirectUrl: 'https://your-app.com/thank-you'
});

DocuTrust.on('completed', (detail) => {
  console.log('Submission completed:', detail);
});

<iframe
  id="docutrust-frame"
  src="https://your-app.com/s/aB3kL9mNpQ?embed=true"
  width="100%"
  height="800"
  frameborder="0"
  allow="camera; microphone"
  style="border: none;"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.origin !== 'https://your-app.com') return;

    var data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;

    if (data.type === 'completed') {
      console.log('Submitter ID:', data.detail.submitter_id);
      console.log('Submission ID:', data.detail.submission_id);
      console.log('Audit log URL:', data.detail.audit_log_url);
      console.log('Documents:', data.detail.documents);
    }

    if (data.type === 'docutrust:resize') {
      var iframe = document.getElementById('docutrust-frame');
      iframe.style.height = data.detail.height + 'px';
    }
  });
</script>