Freeday widget in an iframe

Use this when you want the chat as a fixed part of a page, for example a panel on your customer service page, instead of the floating chat button. You decide where the chat sits and how big it is.

The setup has two parts: a small chat page on your own domain, and an iframe that shows that page wherever you want the chat.

1. Create a chat page on your domain

Create a page on your website, for example https://www.example.com/chat, that contains only the widget. It uses the standard embed with fullscreen: true, so the chat opens straight away and fills the page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Chat</title>
  <style>html, body { margin: 0; height: 100%; }</style>
</head>
<body>
  <script type="module" async>
    // The channel id will be provided to you by Freeday
    const channelId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
    const response = await fetch(`https://api.freeday.ai/webchat/v1/widget/${channelId}`);
    const freedayConfiguration = await response.json();
    const freedayWidget = await import(freedayConfiguration.cdnUrl);
    freedayWidget.bootstrap({ ...freedayConfiguration, fullscreen: true });
  </script>
</body>
</html>

2. Show the chat page in an iframe

Add an iframe that points to your chat page wherever you want the chat to appear.

<iframe
  src="/chat"
  title="Chat"
  style="width: 100%; height: 640px; border: 0;">
</iframe>

The chat fills the iframe, so set its width and height to the size you want. If you want a chat button that opens the chat, use the standard installation instead.

Security

• Allowlist your domain in Freeday: give Freeday the domain that hosts your chat page (for example https://www.example.com) so it can be added to the allowed websites.
• Content Security Policy: the chat page needs the same policy as the standard installation. If the chat page is on a different domain from the page with the iframe, also allow it in that page's frame-src.

How the chat behaves

• No close or minimise button. The chat stays open in the iframe.
• Conversations carry across pages. The chat remembers a visitor's conversation across the pages of your domain, and past conversations are available if conversation history is enabled for your channel.
• User context can be passed from the chat page in the same way as the standard embed — see Configuration & user context.

Troubleshooting