Add the Messenger to a website
Create a Web Chat connection in your project’s Connections page. Open the connection to edit it. Changes save as you leave text fields or change an option. Check the Saved notice and the preview.
Appearance and header
Section titled “Appearance and header”In Appearance, choose the Primary color, Theme and Display mode. Themes are Light, Dark and Auto. Display modes are Popup, Sidebar, Fullscreen and Inline.
In Header, set the Title and Subtitle visitors will see. These are separate from the agent’s greeting.
Composer
Section titled “Composer”In Composer, set Placeholder text and choose whether visitors can send Voice messages and File attachments. Turning an option off removes its button from the visitor’s composer.
The visitor’s typing box accepts up to 5,000 characters. This isn’t a server limit on all conversation messages or an Inbox reply limit.
Security
Section titled “Security”Use Security → Allowed domains to choose which sites can embed the widget. Leave it blank to allow all domains. Use *.example.com to include subdomains. Check the widget on the actual website before sharing it.
Deploy
Section titled “Deploy”Open Deployment to find the connection ID and Hosted page link. The hosted page opens the chat without adding code to a website.
Copy Embed code for a popup, or Inline embedding for a chat inside the page. Each snippet includes your connection ID and the loader URL. The examples below show the same markup with a placeholder ID.
For a popup, paste this before the closing </body> tag:
<script src="https://messenger.flowxo.com/loader.js" data-connection="YOUR_CONNECTION_ID"></script>For a chat inside the page, give its container the connection ID:
<div id="flowxo-chat" data-fxo-connection="YOUR_CONNECTION_ID"></div><script src="https://messenger.flowxo.com/loader.js"></script>Open the website and check that the chat appears with the expected header and composer. Send a test message, then find that conversation in the project’s Inbox.
Languages
Section titled “Languages”Messenger controls support the languages below. The widget uses the configured language, or the browser language when none is set. Language selection doesn’t translate your greeting, header text, custom placeholder or past messages.
| Language | Code | Text direction |
|---|---|---|
| English | en |
Left to right |
| Arabic | ar |
Right to left |
| Bulgarian | bg |
Left to right |
| German | de |
Left to right |
| Greek | el |
Left to right |
| Spanish | es |
Left to right |
| Finnish | fi |
Left to right |
| French | fr |
Left to right |
| Italian | it |
Left to right |
| Hebrew | iw |
Right to left |
| Japanese | ja |
Left to right |
| Korean | ko |
Left to right |
| Dutch | nl |
Left to right |
| Portuguese | pt |
Left to right |
| Russian | ru |
Left to right |
| Thai | th |
Left to right |
| Turkish | tr |
Left to right |
| Ukrainian | uk |
Left to right |
| Chinese | zh |
Left to right |
The Inbox is English only, even when the surrounding dashboard uses another language.