Widget embed & appearance
Script attributes, inline and custom launchers, chat links, workflow forms and public widget behaviour.
In this article
Before you begin
Activate the agent and open its integration/embed controls. You need permission to add the snippet to your website or configure the relevant plugin.
Step by step
- 1
Prepare the assistant
Choose the correct active bot and configure its public name, language, appearance and fallback messages.
- 2
Add the snippet once
Install the script on a staging page with the bot UUID. Keep private API credentials out of public HTML.
- 3
Verify the published experience
Test the launcher, a customer question, mobile layout and staff handoff on the actual public page.
Embed a branded assistant on any website.
The standard widget is a small script that loads a floating iframe. It does not expose a workspace API key. Configure the assistant’s public name, icon, language, tone and message copy in the bot’s Appearance area before copying the snippet.
Visitors can follow factual work steps while the assistant searches knowledge, checks website sources or uses a connected store. Steps include elapsed times and available public result links, and stay visible while the answer starts. After completion, the list collapses and can be reopened. Saved activity returns with the conversation history; older answers without saved activity have no reconstructed steps. These updates describe actual source and tool activity, not private model reasoning. No extra script attribute is needed.
<script
src="https://www.corthex.app/widget.js"
data-bot-id="YOUR_BOT_ID"
data-accent-color="#3A82FF"
></script>Dictate a message instead of typing.
Open AI agents, choose an assistant and open Features. Turn Voice input on or off, then choose Save features. This page also holds live typing, team handoff and store tools. Voice input is off by default and applies to the standard website widget and Test Chat.
Click the microphone, allow microphone access and speak for up to 60 seconds. The spoken language is detected from each recording, independently of the interface language. While recording, the Send position becomes Stop; click it or press Enter to turn the recording into an editable draft. Check the text, then choose Send. Cancel or press Escape to discard a recording or pending transcription; closing the widget or hiding the page also stops capture.
Audio is sent to Groq for transcription and is not saved by Corthex. Voice input requires HTTPS, a compatible browser and microphone permission. Typing stays available when audio capture is unsupported or permission is denied.
- Custom iframe: Include allow="clipboard-write; microphone" on the iframe. The standard widget script and generated embed code include it automatically.
- Restricted host website: A Permissions-Policy header on your website must allow microphone access for the Corthex origin. A restrictive parent policy cannot be relaxed by the iframe.
- Turn voice off: Save the disabled setting on the assistant. New transcription requests are blocked even from an older open widget; reloading also removes its microphone button.
Embed options
Use the script without appearance overrides for the standard Corthex launcher, close controls, loading state and saved bot settings. For custom controls, use data-trigger-selector or data-button-selector. For inline placement, set data-inline-selector (or data-container-selector). Session continuity uses browser storage and follows the configured session timeout.
Single-page apps can dispatch a corthex:destroy event on the installed script element before removing it. This removes that widget's UI, listeners, timers, pending requests and owned history hooks. Mark data-corthex-destroyed as true before removing a still-loading script so it cannot initialize late. Reinstall the normal script after account or workspace changes with the current visitor key.
| Attribute | Purpose |
|---|---|
| data-bot-id | Required UUID of the bot to display. |
| data-accent-color | Optional launcher theme colour. |
| data-locale | Optional language override for the standard launcher, hub, chat labels and API feedback: en, nl, de, fr, es, pt or it. Custom content needs its own translations. |
| data-visitor-key | Optional visitor identifier (8–160 characters), also used to scope local conversation and workflow storage. This browser hint does not authenticate a user or grant access to private data. Corthex's own website supplies a server-derived key; customer authentication needs its own verified integration. |
| data-button-position | Use left or right; right is the default. |
| data-open | Set to true to start with the launcher open. |
| data-default-view | Choose home, messages, help, news or chat. |
| data-embed-mode: inline | Render in a designated container instead of showing the floating launcher. |
Open chat from a link
Add #corthex-open-chat to a page URL that has the Corthex widget installed to open Chat immediately. This works for the hosted widget, inline embeds, and native PrestaShop or WooCommerce widgets, including when a visitor changes the hash without reloading the page.
<a href="#corthex-open-chat">Chat with us</a>Workflow delivery and forms
Website workflows evaluate deterministic rules for page visits, opening the messenger and invitation/form events. Interactive forms and page links require the embedded messenger; unsupported channels skip workflows that need those actions. Optional forms validate the assigned published fields, retain values after a failed save and store contact details as unverified. Starting a new chat clears pending workflow forms.
The widget uses public JSON endpoints without a workspace API key: POST /api/embed/workflows/contact submits a form with its bot, conversation, workflow, execution, branch and action identifiers plus field data. Reuse the execution ID when retrying. POST /api/embed/workflows/history reports shown, clicked or completed events for an existing conversation. Limits are 15 form submissions and 120 history reports per IP per hour. History is unverified browser telemetry, not proof of identity or a saved form.
Reply previews while chat is closed
The standard floating launcher shows the newest unread staff or bot reply above the chat button, with the sender, avatar, time and an unread badge. Multiple replies form a visual stack. Click the preview to open the conversation; dismissing it leaves messages unread. Read state follows the current conversation across pages and tabs on this browser. Visible pages check for saved replies about every 15 seconds; this is separate from desktop notifications. Inline and custom launchers do not show this floating preview.
Make the widget feel native to your website.
Appearance controls the public face of one bot. It is separate from the workspace UI language, so teams can work in their preferred language while a customer sees a localised assistant.
- Identity Set the display name, an uploaded PNG/JPG/WebP/GIF icon, accent colour, tone and 12/24-hour timestamps. Empty display names fall back to the internal bot name. Public copy Customise staff-CTA, handoff-form, validation, offline, presence, pause/resume and message-input text. Empty fields use the selected locale defaults. Widget styles Choose launcher, placement, initial view, colours, avatar and session behaviour; use the preview before publishing. Proactive prompts Configure the invitation avatar in Appearance. Manage invitation content, timing and conditions centrally in Workflows, and assign each workflow to the intended agents.
Website workflows
Open Workflows to build shared invitations, optional contact forms and page recommendations. Assign one or more agents, test the draft, then publish. Use page, visit, dwell and shown/clicked/completed history conditions to keep invitations relevant. Existing agents can import their previous rules explicitly; new workflow steps stay private until published.
Localisation workflow: choose the bot language first, use “Fill defaults” to populate the standard copy, then edit only the messages that need your brand voice. This makes future copy maintenance much clearer.
Good to know
Use the native commerce plugin when that integration owns the widget. Avoid installing a second hosted script on the same page.
Public widget identifiers are not proof of visitor identity. Collected contact details remain unverified until an independent process verifies them.
Check the result
Publish the website change, open the public page, send a test question and verify the correct conversation appears in the correct Corthex workspace.
Questions & troubleshooting
Why is the widget missing?
Check the correct active bot UUID, published script, duplicate installation and site content-security rules.
Rate this guide on this device. Ratings are not sent to Corthex.