Webflow

Copianto integrates smoothly with Webflow via custom code injection, adding a fast, cache-busting script and stylesheet that render the chat widget across your site.

Site-wide Configuration Setup (recommended)

1. Open Webflow Dashboard → Your Project → Settings.

2. Click the Custom Code tab.

3. In Before </body> tag, paste the full Copianto snippet.

4. Replace demo-public-key-12345 with your real Public Key.

5. Click Save Changes.

6. Publish your site (custom code only runs on published domains).

7. Test in an incognito window; start a chat to confirm it appears in your Copianto dashboard.

Page-specific Configuration Setup (optional)

1. Open Designer → navigate to the page.

2. Add an Embed element where allowed.

3. Paste the same snippet and replace the Public Key.

4. Publish and test the page.

<script>
(function () {
  const timestamp = new Date().getTime();

  // Demo public key — replace with your real public key when ready
  const publicKey = "demo-public-key-12345";

  // Append stylesheet with cache-busting query
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://copiantoai.ams3.cdn.digitaloceanspaces.com/widget/v4/copianto-widget.css?" + timestamp;
  document.head.appendChild(link);

  // Create and append widget container (at top of body)
  const widgetDiv = document.createElement("div");
  widgetDiv.id = "copianto-chat";
  widgetDiv.setAttribute("data-public-key", publicKey);
  document.body.insertBefore(widgetDiv, document.body.firstChild);

  // Append main widget script with cache-busting query
  const script = document.createElement("script");
  script.src = "https://copiantoai.ams3.cdn.digitaloceanspaces.com/widget/v4/copianto-widget.js?" + timestamp;
  document.body.appendChild(script);
})();
</script>

Notes: The script appends Copianto’s CSS/JS with a timestamp to avoid caching and inserts a div with your Public Key near the start of the body for visibility.

Tip: Custom code in Project Settings requires a Site plan; page-level Embed is a good fallback for testing.