Skip to content
CuttlelyCuttlelyCuttlely

Share and embed a chat

Any chatflow can be shared as a link or added to your website, including a chatflow that runs a harness. Both use Cuttlely’s own chat, which your Cuttlely server serves at /embed/chat.js. The script always matches your server’s version, and nothing loads from a CDN.

The examples use a made-up bakery, Crumb & Co.

Section titled “Share a link”
  1. Open the chatflow and select API Endpoint (the </> button at the top right).
  2. Open the Share Chatbot tab.
  3. Turn on Make Public. Only a public chatflow opens for people who are not signed in.
  4. Select Copy Link, or Open New Tab to try it. The link is https://<your Cuttlely>/chatbot/<chatflow id>.

The shared link for the Crumb & Co. chatflow in light mode. The header shows the Cuttlely mark, the title Crumb & Co. and Ready. The question What breads do you have and how much are they? is answered with a table: Country sourdough $7.50, Seeded rye $6.80, Baguette $3.90, Brioche loaf $8.20, then a line about the gluten-free buckwheat loaf on Fridays, with copy, thumbs up and thumbs down buttons under it. The input at the bottom says Ask about breads, pastries or hours, and the footer says Built with Cuttlely.

Before the first question, the chat shows the welcome message and the chatflow’s starter prompts.

The welcome screen of the shared link: Ask Crumb & Co., the welcome message Hi! I can help with today’s breads, prices and opening hours., and three starter prompts: What breads do you have and how much are they?, Are you open on Sunday?, Do you have anything gluten-free?

The chat follows the visitor’s light or dark system setting.

The same link in dark mode. The question Are you open on Sunday? Show the week as a table. is answered with We are closed on Sunday, with closed on Sunday in bold, and a table of opening hours from Monday 7am - 6pm to Saturday 8am - 4pm and Sunday Closed.

On a phone the chat fills the screen.

The shared link on a phone. The breads table fits the screen width, and the input and send button sit at the bottom.

What the chat shows

Section titled “What the chat shows”
  • Answers as they are written, with a stop button while the model is writing.
  • Formatting: lists, tables, code blocks with a copy button, links and images.
  • Sources under the answer when the chatflow returns source documents.
  • Starter prompts on the welcome screen and follow-up prompts under an answer, when the chatflow has them.
  • Thumbs up and down under each answer when Chat Feedback is on for the chatflow, and a copy button on every answer.
  • Image uploads (picker, paste or drag) when the chatflow accepts images.
  • Harness runs: a run card with the route and each specialist’s time, then the answer and any charts the team made.

A chatflow that runs the crumb-sales-team harness, in dark mode. The question Compare sourdough and rye sales: sourdough 120, rye 75 is answered under a Run complete card that says 1 specialist · 15.5 s. The answer has a table with Sourdough 120 and Rye 75 and the bar chart the charts specialist drew, titled Sourdough vs Rye Sales.

Model output is always shown as text: HTML in an answer is never run, even when Render HTML on the chat is on. Links and images only use http, https, mailto and your server’s own paths.

Not in the shared chat yet

Section titled “Not in the shared chat yet”

Speech to Text, Text to Speech, Leads, and File Upload (whole files for the chatflow to read) don’t show in the shared chat or the embed yet. Try them in the canvas chat.

Private chatflows

Section titled “Private chatflows”

A chatflow that is not public, or that needs an API key, does not open for visitors. The link shows This chat is private or needs a key. instead.

Change the look

Section titled “Change the look”

The chat uses Cuttlely’s colors and type by default. The chatflow’s share settings change it:

  • Share Chatbot tab: Title, Title Avatar Link, Welcome Message, Error Message, Font Size, TextInput Placeholder, the title, message and input colors, the send button color, and Start new session when chatbot link is opened or refreshed.
  • Configuration (the settings button on the canvas): Starter Prompts, Follow-up Prompts, Chat Feedback, and Allowed Domains.

A color you leave at the dialog’s default keeps Cuttlely’s theme. Colors are used as you pick them; check that text stays readable on your background.

Embed it on your website

Section titled “Embed it on your website”
  1. Make the chatflow public, as above.
  2. Open API Endpoint and the Embed tab.
  3. Copy a snippet and paste it into your page.

Popup Html adds a chat button in the bottom right corner:

<script src="https://your-cuttlely.example.com/embed/chat.js" data-flow-id="YOUR_CHATFLOW_ID" defer></script>

Fullpage Html puts the chat where the div is:

<div id="cuttlely-chat" style="height: 100vh"></div>
<script
    src="https://your-cuttlely.example.com/embed/chat.js"
    data-flow-id="YOUR_CHATFLOW_ID"
    data-mode="page"
    data-target="#cuttlely-chat"
    defer
></script>

The React tabs give a component that loads the same script. Show Embed Chat Config shows every option: theme (auto, light or dark), open, and config overrides for the title, welcome message, placeholder, starter prompts and colors.

A plain bakery web page, Crumb & Co. Bakery, with the chat open in the bottom right corner. The question Do you have anything gluten-free? is answered: Yes, we have a gluten-free buckwheat loaf available on Fridays only for $8.90. The round button under the panel closes it.

Allowed domains

Section titled “Allowed domains”

With no Allowed Domains set, any site can embed a public chatflow. With a list set, only those sites can; the chat on any other site says This chat is not available on this site.

Charts on another site

Section titled “Charts on another site”

A chart a harness makes is a file saved with the chat. The share link and an embed on the same site as Cuttlely always show it. An embed on another site shows it when that site is in the chatflow’s Allowed Domains: the browser on your site may then read the chart files of that chatflow, and only for the chat it is in. Sites that aren’t listed, and other chatflows’ files, are not opened to it.

With no Allowed Domains set, chart files on another site follow your server’s CORS_ORIGINS setting, as before. To show charts in an embed, add your site to Allowed Domains.

The Crumb & Co. Bakery page on another site, with the chat open in the bottom right corner. The sales team answered Chart this week’s croissant sales with a table of the six days and a bar chart titled This Week’s Croissant Sales, from 42 on Monday to 88 on Saturday.

Troubleshooting

Section titled “Troubleshooting”
What you see Why
This chat is private or needs a key. The chatflow is not public, or it has an API key. Embeds and links can’t send a key.
This chat is not available on this site. The site is not in the chatflow’s Allowed Domains.
This chat could not be found. The chatflow id is wrong, or the chatflow was deleted.
This chart could not be shown here. The embed is on another site that is not in the chatflow’s Allowed Domains.
No chat button on your page The script URL is not your Cuttlely server, or data-flow-id is missing.
The chat widget is not built. Run pnpm build. A from-source server was started without building. Run pnpm build.