Canva Websites Integration Guide

QuackChat on Canva Websites

Add the QuackChat widget to your Canva Website using the HTML embed feature.

Quick Start (TL;DR)

1. Open your Canva Website in the editor
2. Add an Embed element (Apps > Embeds > More)
3. Paste the widget code
4. Publish your site

Prerequisites

• Canva Pro plan or higher (required for custom HTML embeds)
• Bot ID from your QuackChat dashboard

Step-by-Step Installation

1. Open your Canva Website in the editor
2. Click Apps in the left sidebar
3. Search for Embed or navigate to Embeds > More
4. Add an Embed element to your page
5. Click the embed element and select Add your own
6. Paste the widget code:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
></script>

7. Click Add to design
8. Resize the embed element to be as small as possible (the widget floats independently)
9. Publish your website

Verification

Quick test:

1. Publish your Canva Website
2. Visit the published site
3. Look for the chat bubble in the bottom-right corner
4. Click to open and send a test message

Note: The widget may not appear correctly in the Canva editor preview. Always test on the published site.

Troubleshooting

Widget doesn't appear

Cause: Embed element may not support external scripts in all cases.

Solution: Ensure you're using Embed > Add your own (not the URL embed). If issues persist, try republishing.

Widget is cut off or mispositioned

Cause: Embed container constrains the widget.

Solution: Make the embed element as large as possible or position it in the bottom-right corner of your page.

Known Limitations

• Custom HTML embeds require Canva Pro or higher
• Embed runs in a sandboxed iframe (similar to Wix)
• Cross-page conversation persistence may be limited
• Limited control over widget positioning
• JavaScript API calls from outside the embed are not supported

When to Consider Alternatives

If you need full JavaScript API access or more control over the widget, consider exporting your design and hosting with a platform that offers better custom code support (WordPress, Webflow).