Framer

Copianto integrates smoothly with Framer 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 your project in Framer.

2. Go to Settings (⚙️) → Code (or Custom Code).

3. Find the Body (or Body Code) field.

4. Paste the full Copianto snippet.

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

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

7. Open the live URL in an incognito window and verify the widget loads; send a test message.

Page-specific Configuration Setup (optional)

1. In the canvas, select the page.

2. Add a Code injection (if available) for that page’s Body.

3. Paste the Copianto snippet and set your Public Key.

4. Publish and test that page’s URL.

<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.