The ceremony URL
Add two query parameters to the ceremony URL:embedded=true
-> Configures the UI for embedding and specifies allowed sources for theframe-ancestors
directive of the .event_delivery=message
-> Sends ceremony events (like ceremony completion) as Javascript messages.
https://sign.signatureapi.com/en/start?token=eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE3MjI4OTE3NDYsImV4cCI6MTcyMzQ5NjU0NiwiY2VyZW1vbnlf&embedded=true&event_delivery=message
The <iframe> tag
Embed the signing interface using an iframe tag with the Ceremony URL as thesrc
attribute.
Ensure you use the URL with the
embedded=true
and event_delivery=message
query parameters appended.Testing with Embedder
To help you test ceremony embedding before implementing it in your application, we provide an Embedder tool. This tool allows you to quickly preview how your ceremony will appear inside an iframe.
- Go to the Embedder Tool
- Enter your ceremony URL (the
embedded=true
andevent_delivery=message
query parameters are added automatically) - Optionally, adjust the width and height values in pixels
- The tool will display your ceremony in an iframe with the specified dimensions
Listening to events
The embedded ceremony sends JavaScript MessageEvents for events happening inside the ceremony. Your app can listen to these events and take actions, such as closing the iframe when the ceremony is completed. Here’s an example of how to listen to these events:Troubleshooting
If the browser refuses to load the iframe content and you see an error like this in the console log:Refused to frame … because an ancestor violates the following Content Security Policy directive: “frame-ancestors none”.Make sure:
- You added the
&embedded=true
query parameter to the ceremony URL. - Your app’s domain is included in the
embeddable_in
array when creating the ceremony.
embeddable_in
array, for example:
We don’t recommend using the asterisk
*
wildcard in production, as it can create security vulnerabilities.