Embed a Signature Ceremony in Power Pages with SignatureAPI

Learn how to embed a SignatureAPI signature ceremony directly into a Microsoft Power Pages form using Power Automate.

Overview

This tutorial walks you through embedding a SignatureAPI signature ceremony directly into a Microsoft Power Pages site. By combining Power Pages (for the customer-facing form), OneDrive (for template storage), and the SignatureAPI connector (for electronic signatures), you can let customers fill out a form and sign a document without ever leaving your website.

What You’ll Learn

• How to trigger a Power Automate flow from a Power Pages form submission.
• How to retrieve and pre-fill a DOCX contract template stored in OneDrive.
• How to create and send a signature envelope using SignatureAPI.
• How to configure a ceremony with custom authentication for embedding.
• How to edit the Power Pages source code to invoke the flow on form submission.
• How to embed the signature ceremony iframe in your Power Pages site.

The Problem

Many companies need to collect information from customers and have them sign documents as part of the same workflow. Without automation, this process introduces several pain points:

• Manual signature handling — customers must sign documents outside of the web experience, adding friction and delays.
• Disconnected user experience — the signature step happens on a separate page or platform, breaking the flow for the customer.
• No dynamic document generation — staff must manually insert customer details into contracts before sending them for signature.

How Automation Helps

• Automatically generates a personalized contract from a template using customer-submitted form data.
• Creates a signature envelope and recipient in SignatureAPI without manual intervention.
• Returns an embeddable ceremony URL so the customer can sign directly on your Power Pages site.
• Eliminates context-switching for the customer by keeping the entire process on a single page.

Requirements

Before starting, make sure you have:

• Power Automate — to build the automated workflow.
• SignatureAPI account — for electronic signatures. You can obtain an API key from the SignatureAPI Dashboard.
• Power Pages — for hosting the customer-facing form and embedded ceremony.
• OneDrive / SharePoint — for storing your DOCX contract template.

Flow Overview

The automation process follows these steps:

1. Trigger: A Power Pages form submission starts the flow.
2. Data Retrieval: Collect customer details from the form inputs and fetch the DOCX template from OneDrive.
3. Signature Process: Create an envelope via SignatureAPI, add the recipient, attach the DOCX template, define the signature placement, and start the envelope.
4. Ceremony Creation: Create a ceremony with custom authentication and return the embeddable URL to Power Pages.

Here is what your final Power Automate flow will look like. Note that the flow is created from Power Pages, but you can also view it from the Power Automate dashboard.

Step-by-Step Tutorial

Follow these steps to automate your signature process using Power Pages, SignatureAPI, and Power Automate.

Step 1: Prepare the Agreement Template

Create or update your agreement template by adding placeholders for dynamic fields and defining where the customer will sign.

To prepare your template:

1. Open your existing customer agreement document (DOCX format) in Microsoft Word.
2. Identify each place where customer details should be dynamically inserted (for example, name and email).
3. Insert placeholders using double curly brackets around descriptive keys. Examples:
   • Customer name: {{customer.name}}
   • Customer email: {{customer.email}}
4. Define the signature location by inserting a signature placeholder using double square brackets: [[customer_signature]]

Example placeholder usage in your document:

Dear {{customer.name}}, Please review and sign your agreement below: [[customer_signature]]

5. Save your template and upload it to Documents in your SharePoint Site.

Important: Ensure placeholder keys match exactly with what you configure later in Power Automate. Keep your template simple and clear to avoid confusion during dynamic insertion.

Step 2: Create the Power Pages Site

1. Visit Power Pages and sign in.

2. From the left-hand menu bar, in the Home section, click Start from blank.

   

3. Name the site (for example, “Customer Agreement Form”), set the web address (for example, “customer-agreement-form”), and click Done.

   

Step 3: Set Up the Power Automate Flow

Create the automated workflow in Power Automate directly from Power Pages.

3.1 Set the Flow Trigger

1. From the left-hand menu bar, click Set up and select Cloud Flows.

2. Click Create new flow.

   

3. Rename the flow (for example, “Customer Agreement Flow”), select the When Power Pages calls a flow trigger, and give it a name (for example, “Customer Agreement”).

   

3.2 Add Inputs

1. Click on the trigger and select Add an input. Choose the Text type and enter customerName as the input name.

2. Repeat this step to add a second text input named customerEmail.

   

Step 4: Retrieve the Contract Template from OneDrive

Fetch your customer agreement template stored in OneDrive.

1. Add the Get File Content using Path action from the OneDrive connector.

2. Select the DOCX template stored in your OneDrive.

   

Step 5: Set Up the Signature Process

Configure SignatureAPI to create, send, and track the signature process.

5.1 Create a SignatureAPI Envelope

1. Add the Create an Envelope action from the SignatureAPI connector.

2. If prompted, authenticate your connection using your SignatureAPI key from the SignatureAPI Dashboard.

   

3. Set an Envelope Title (for example, the customer name) and an email message using dynamic content.

   

5.2 Add the Recipient (Signer)

Specify who will receive and sign the contract, with manual ceremony creation.

1. Add the Add Recipient - Signer action.

2. Set the Envelope ID from the dynamic content.

3. Map the Recipient Name and Recipient Email using form details from dynamic content.

4. Set the Recipient Key (for example, customer) to match your DOCX placeholders.

5. In the advanced options, set Recipient Ceremony Creation to manual.

   

5.3 Attach the DOCX Contract Template

Attach your contract template to the envelope and populate it with customer details.

1. Add the Add a Template - DOCX action.

2. Set the Envelope ID from the dynamic content.

3. Select the File Content from the SharePoint action.

4. Set the Document Title (for example, “Customer Agreement”).

5. Map each placeholder field ({{customer.name}}, {{customer.email}}) to the corresponding dynamic content from the flow inputs.

   

5.4 Define Signature Placement

Specify where the customer should sign on the document.

1. Add the Add a Place - Signature action.

2. Set the Document ID using the dynamic content.

3. Enter the placeholder from your DOCX template (for example, [[customer_signature]]).

4. Set the Recipient Key using the dynamic content.

   

5.5 Start the Signing Process

Trigger the sending of your envelope to the customer for signing.

1. Add the Start Envelope action.

2. Set the Envelope ID using the dynamic content.

   

5.6 Create the Ceremony

Create a ceremony with custom authentication. This returns a URL that you will use to embed the signing experience in Power Pages.

1. Add the Create Ceremony - Custom authentication action from the SignatureAPI connector.

2. Set the Recipient ID using dynamic content.

3. Set the Authentication Provider to the provider you want to use. This value appears in the Audit Log of the deliverable as the security provider for the ceremony.

4. Set the Authentication Data to the verification data for the user and provider. This also appears in the Audit Log.

5. In the advanced options, under the Extra Properties section, add the following JSON:

   {"embeddable_in":["*"]}
   

   This allows the ceremony to be embedded in any Power Pages site.

   

5.7 Return the Ceremony URL to Power Pages

1. Add an output of type Text.

2. Set the Name to the variable name you want to return (for example, url).

3. Set the Value to the ceremony URL from the Create Ceremony - Custom authentication action using dynamic content.

   

Step 6: Save the Flow and Add It to Power Pages

1. Save the flow and copy the flow URL.

2. Set the roles and permissions for the flow. In this example, allow all roles to access the flow.

   

Step 7: Add the Form and Embed the Ceremony in Power Pages

To invoke the Power Automate flow from a form submission, you need to add custom HTML and JavaScript to your Power Pages site using the Visual Studio Code editor.

7.1 Open Power Pages in the VS Code Editor

1. From the left-hand menu bar, click Pages to view all pages on the site.

   

2. Click Edit code. This opens the VS Code editor with the Power Pages source code, starting on the home page.

   

7.2 Add the Form and Ceremony Embed Code

In the VS Code editor, open the Home.html file and add the following code. This creates a form that collects the customer’s name and email, calls the Power Automate flow on submission, and displays the returned ceremony in an iframe.

The code has three main sections:

• Form HTML — renders input fields for the customer’s name and email, along with a submit button.
• Iframe container — a hidden iframe that becomes visible once the ceremony URL is returned.
• JavaScript — handles form submission, sends the data to the Power Automate flow, and loads the ceremony URL into the iframe.

<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0; min-height: auto; padding: 8px; justify-content: center;">
  <div class="container" style="padding: 0; display: flex; flex-wrap: wrap; max-width: 600px;">
    <div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; align-items: center;">

      <!-- Title -->
      <h2 style="text-align: center; margin-bottom: 16px;">
        Customer Agreement Form
      </h2>

      <!-- Description -->
      <p style="text-align: center; margin-bottom: 24px;">
        Please fill out the form below. We'll use this information to generate or request a customer agreement.
      </p>

      <!-- Form -->
      <form id="contractForm" style="width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 12px;">

        <!-- Name Field -->
        <label for="name" style="font-weight: bold;">Name</label>
        <input
          type="text"
          id="name"
          placeholder="Enter your full name"
          required
          style="padding: 10px; border: 1px solid #ccc; border-radius: 4px;"
        />

        <!-- Email Field -->
        <label for="email" style="font-weight: bold;">Email</label>
        <input
          type="email"
          id="email"
          placeholder="Enter your email address"
          required
          style="padding: 10px; border: 1px solid #ccc; border-radius: 4px;"
        />

        <!-- Submit Button -->
        <button
          type="submit"
          style="
            background-color: #007bff;
            color: #fff;
            padding: 12px;
            border: none;
            border-radius: 4px;
            margin-top: 8px;
            cursor: pointer;
            font-size: 16px;
          "
        >
          Send Request
        </button>
      </form>
    </div>
  </div>
</div>

<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
  <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
    <div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px;">
      <iframe frameborder="0" id="iframeToShow" src="" style="display: none; width: 100%; height: 500px;"></iframe>
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("contractForm").addEventListener("submit", function (e) {
      e.preventDefault();

      const name = document.getElementById("name").value;
      const email = document.getElementById("email").value;

      // Replace this string with your actual flow URL from Step 6
      const _url = "REPLACE_WITH_YOUR_FLOW_URL";

      var data = {};
      data["customerName"] = name;
      data["customerEmail"] = email;

      var payload = {};
      payload.eventData = JSON.stringify(data);

      shell
        .ajaxSafePost({
          type: "POST",
          contentType: "application/json",
          url: _url,
          data: JSON.stringify(payload),
          processData: false,
          global: false,
        })
        .done(function (response) {
          const result = JSON.parse(response);
          const iframe = document.getElementById("iframeToShow");
          iframe.src = result.url + "&embedded=true&event_delivery=message";
          iframe.style.display = "block";
        })
        .fail(function (error) {
          console.log("Error: ", error);
          alert("Something went wrong.");
        });
    });
  });
</script>

1. Copy and paste the code into the VS Code editor.

2. Replace the _url value ("REPLACE_WITH_YOUR_FLOW_URL") with the actual flow URL you copied in Step 6.

   

   Important: The data object keys in the JavaScript must match the input names you defined in Step 3.2. If you rename or add inputs in the flow trigger, you must update the corresponding keys in the script.

   var data = {};
   data["customerName"] = name;
   data["customerEmail"] = email;
   

3. Save the file and refresh the Power Pages preview.

   The form collects the customer’s details and, on submission, triggers the Power Automate flow and embeds the ceremony directly in the page. You can customize the styles and layout to match your site’s design.

   

Step 8: Test Your Automation

Test the entire process end-to-end.

1. Go back to Power Pages. You should see the form on the home page. Click the Preview button and select the Desktop option.

   

2. Fill out the form with a test name and email, then click Send Request. After a few seconds, the ceremony should appear embedded in the page.

   

3. Verify the following:

• The ceremony is embedded and visible on the page.
• The ceremony loads correctly and allows the signer to complete the signature.
• The signed document appears in your SignatureAPI dashboard after completion.

Troubleshooting & FAQ

Common Issues:

• API Key Errors: Ensure your SignatureAPI key is correct and that the connection is authenticated in Power Automate.
• Dynamic Content Mapping: Double-check that placeholder names in your DOCX file match exactly with the dynamic content mappings in the flow.
• File Access Issues: Verify that permissions and file paths in OneDrive or SharePoint are configured correctly and accessible by the flow.

Frequently Asked Questions:

• What if the ceremony does not appear after form submission? Open your browser’s developer console to check for errors. Also verify that the flow ran successfully in Power Automate and that the ceremony URL was returned correctly.

• Can I adapt this for other document types or workflows? Yes. You can modify the DOCX template, add additional form fields, or change the flow logic to support different document-signing scenarios.

• How do I restrict which roles can trigger the flow? In the Power Pages flow settings (Step 6), configure the role permissions to allow only specific roles instead of granting access to all roles.

Best Practices & Security

• Always store API keys securely and avoid hardcoding them in client-side code. The flow URL should be the only value placed in the page script.
• Regularly monitor flow runs in Power Automate to catch and resolve errors early.
• Document any changes to your flow or template so your team can maintain the integration over time.

Additional Resources

• SignatureAPI Documentation
• Power Pages Documentation
• Power Automate Community

Conclusion

You have successfully embedded a SignatureAPI signature ceremony in a Power Pages site using Power Automate. Your customers can now fill out a form and sign documents without leaving your website.

Happy Automating!