Überblick
With the Embed feature, you can place your ProtocolHero form exactly where your visitors already are: on your website. Instead of simply sharing a link, you can embed the form as an iframe, a popup button, or a full-page form. Visitors do not need a ProtocolHero account, and submitted forms appear under Submissions just like any other submission. To use this feature, you need at least the Standard plan, an active protocol without workflow or level blocks, and the ability to add HTML code to your website.
Schritt für Schritt
Activate the protocol
Open the Protocols overview and click Activate from the three dots-menu on the protocol card if the protocol is still inactive. Only active protocols can be completed by visitors.
Open the public link
Stay in the Protocols overview, open the ⋯ menu of the desired active protocol, and select Public Link.
Enable the public link
Enable the public link and read the notice below it: anyone with the link can start a submission, but the protocol must be active. If you see a red warning about workflows, level blocks, or an inactive protocol, resolve those issues first. Otherwise, the embedded form will not work for visitors.
Choose an embedding mode
Under Layout Preview, choose how the form should appear on your website. Standard Mode displays the form directly on the page as an iframe, making it ideal for contact pages or landing pages. Popup Mode adds a floating button that opens the form in an overlay. You can customize the button text, position, color, and icon. Full Page Mode displays the form in a large iframe that fills almost the entire page, making it ideal for dedicated form pages.
Customize the success screen (optional)
In the Success Page section, define the title and message visitors will see after submitting the form, for example, "Thank you for your request!". Optionally, visitors can receive a PDF copy of their submission by email or be automatically redirected to a custom thank-you page after submission.
Save your options
Scroll to the bottom of the dialog or use the footer and click Save Options. The public link only becomes active after saving, and the embed code is generated at that point. If you later make changes to the protocol in the editor, open Public Link again and save the options once more. Otherwise, visitors may see a maintenance page instead of the updated form.
Copy the embed code
In the Embed Code section, click inside the code field to display the complete code, then click Copy Code. Standard and Full Page modes provide iframe HTML. Popup mode provides both the container and JavaScript code. In Full Page mode, you can also copy the direct URL instead of the iframe.
Add the code to your website
Open your website CMS or the HTML editor of the target page, paste the copied code where you want the form to appear, and publish the page. If part of the form is cut off in Standard or Full Page mode, increase the iframe height in the code or switch to Full Page mode. For Popup mode, always copy the entire code block—the button and the script must remain together. If your website uses a strict Content Security Policy (CSP), you may need to update the frame-src and script-src directives accordingly.
Test the embedded form
Open your website in a browser—preferably in an incognito/private window—and verify that: the form loads correctly or the popup button appears, all fields can be completed, the success page or redirect appears after submission. Finally, open Submissions in ProtocolHero and confirm that the submission has been received. Website submissions are automatically marked with the Embed channel.