Skip to main content

Chat Widget

The Chat Widget settings (titled Live Chat Appearance in the app) let you install Flowcall's chat widget on your website and control how it looks and greets visitors. Use this page to get the embed snippet and to tune colors, copy, and branding.

A live preview on the right updates instantly as you edit. Your appearance changes are staged: a Save Changes bar appears at the bottom whenever you have unsaved edits, and nothing is published until you click it. Discard reverts to the last saved version. A few actions — generating a token, uploading a logo, and Reset to Default — act on their own.

At the top of the page:

  • Copy Chat Widget URL / open link — once a token exists, copy a hosted widget URL (or open it in a new tab) to share the chat directly without embedding.
  • Reset to Default — restores all widget customizations to their defaults and deletes any uploaded logos. You're asked to confirm; this can't be undone.

Website integration​

This card gives you what you need to embed the widget on your site.

  • Public Access Token — a token accepted only by the embedded chat widget APIs. If none exists yet, click Generate Token to create one. Once generated, use the copy button to copy it.
  • Website install snippet — expand this to see a ready-to-paste <script> snippet with your account ID and token already filled in. Paste it just before your page's closing </body> tag. Use Copy Code to copy the whole snippet.

Position​

  • Position — which corner of the page the widget sits in: Bottom Right, Bottom Left, Top Right, or Top Left.

Corners​

  • Corners — the edge style for the widget's surfaces and controls: Rounded (soft corners) or Flat (square edges).

Colors​

  • Primary Color — used for the header, buttons, and the visitor's own messages. Set it with the color picker or by typing a hex value.
  • Accent Color — used for highlights, icons, and interactive elements. By default it's locked to your primary color and generated from it automatically. Click the lock button to unlock and set a custom accent; relocking regenerates it from the primary color.
  • Title — the widget's header title (e.g. Chat Support).
  • Subtitle — a short status line under the title (e.g. Online).
  • Brand Logo — an image shown as the header avatar. PNG is recommended; it's resized to 64×64px. Upload, change, or remove it.

Welcome message​

  • Message — the first message visitors see when they open the chat.
  • Quick Reply Buttons — suggested responses shown as tappable buttons. Type button text and press Enter to add each one; remove one by clicking its tag.

Customer details form​

Collects visitor identity within live chat. Toggle the card on to enable it, then configure:

  • Ask for details — when the form appears: Before visitor can chat or After first visitor message.
  • Form title and Form subtitle — the heading and explanatory text shown above the form.
  • Fields — for Name, Email, and Phone, choose whether each is Shown and whether it's Required. At least one field must stay enabled.
  • Contact method — either Optional, or Either email or phone required (which forces both email and phone to be shown so the visitor can supply one).

Widget button​

  • Icon Style — the floating launcher icon that opens the chat: Chat Bubble, Message, Support, or Custom Logo.
  • Custom Logo — shown only when Icon Style is Custom Logo. Upload your own launcher image (PNG recommended, resized to 64×64px); change or remove it as needed.

Branding​

  • Show Branding — toggles the 'Powered by Flowcall' line in the widget footer.

Saving​

Edit freely and watch the Live Preview update in real time. When you're happy, click Save Changes in the bar at the bottom to publish, or Discard to revert to the last saved version.