Embed a chatbot on a webpage

Zapier Interfaces chatbots can be embedded in a webpage as part of a page or as a popup overlay.

Note

• Embedding is only available on paid Interfaces plans.
• Interfaces with restricted access – by password or managed users – cannot be embedded. 

To embed a chatbot:

1. From your Interfaces project page, hover over the chatbot component and click Edit. 
2. A sidebar will open. Click the Embed tab.
3. Select either:
   • Standard tab to get code to embed the chatbot as part of a page.
   • Popup tab to get code to embed it as a popup overlay.
4. If you select Standard, select Code Snippet Type from the dropdown menu.
5. Click <> Copy embed to copy the code to your clipboard.

Tip

If your app does not accept script HTML tags (such as Coda), you can select iframe from the Code Snippet Type dropdown menu. 

Implementing a popup overlay

When you use the chatbot as a popup overlay on your webpage, ensure that the code is placed in the body of the HTML. It may not work properly on the header or footer, as it will not follow the user as they scroll through a page.

Below are links to information on embedding the chatbot in popular website builders.

• Squarespace: Embed blocks
• Wix: Embedding custom code on your site
• Wordpress: Embed content from other platforms

Note

For dynamic websites, you can add it to the template, and it should appear on all pages that use it.

Restrict domains that can use the chatbot

You can ensure your chatbot is only used on your target webpages by restricting the domains that can use it. To do so:

• From your Interfaces project page, hover your pointer over the chatbot component.
• Click Edit. 
• A sidebar will open. Click the Embed tab.
• Paste or type the allowed domains in the text field. Separate each domain with a comma. 
• The domains should not include the protocol (such as http:// or https://) or path (such as /example/path).
• Click Done.