Set up the web chat channel

The web chat channel lets you chat with visitors of your company website in real time without leaving Creatio. Set it up from the Add channel mini page in the Customer communication hub section — Creatio validates the setup, registers the channel, and generates its embed code automatically.

note

The web chat channel is delivered as part of the Web Chat app, available in Creatio Sales, Creatio Service, and Bank.AI. For other Creatio products, you can install the app manually. The Web Chat app requires the Customer Communication Hub app.

Agents process the resulting chats in the Agent Inbox, provided by the Contact Center app.

You need permission to the "Access to "Chat settings" section" (CanManageChats code) system operation. Learn more: System operation permissions. If you plan to use AI in the channel, seed your knowledge base first so the AI has content to answer from.

Before you begin, make sure the following system settings are populated:

• "Identity server Url" (IdentityServerUrl code)
• "Identity server client id" (IdentityServerClientId code)
• "Identity server client secret" (IdentityServerClientSecret code)
• "Web chat service URL" (WebChatServiceUrl code)

If any of these settings are empty, contact Creatio support.

Create the channel

1. Open the Customer communication hub section from the "Contact Center Supervisor", "Case management", or "Service" workplace.

2. Click Manage channels to open the Communication channels toggle panel, then click Add channel → Web chat to open the mini page.

3. Review the pre-filled fields on the mini page and change only what you need to set the channel details.

   Most often, this means uploading your company logo (PNG or SVG, transparent background, 80×80 px) in the Header logo field and setting the Primary color. You can also change the Queue and Welcome message. Creatio names the channel "Web chat" automatically. You can change the name later on the General Info tab of the channel's settings page.

4. Click Next to continue to the AI setup.

5. Keep or adjust the AI settings for the channel (optional).

   Out of the box, the Use AI in the channel checkbox is selected, with the "Sofia, AI assistant" personality, a friendly tone of voice, and the Customer Support Agent connected. You can change any of these before saving.

6. Click Save to add the channel.

   Creatio opens the Channel connected step. To close the mini page without testing the channel, click Close.

7. Click Test in preview mode to open the channel's settings page and try the chat widget live (optional).

   Send a message and see the reply immediately. Use this to confirm the branding, the welcome message, and, if enabled, the AI before you go live. The Live preview panel is a working chat widget: your messages create a real chat in the channel's queue. To test the agent side, accept the chat in the Agent Inbox and reply. The conversation stays in the preview when you close and reopen the chat widget. To start over, click in the chat widget header.

As a result, Creatio creates the web chat channel and generates its embed code. Test it anytime in preview mode, then go to the channel's settings page to add the chat widget to your company website.

Edit the channel

1. Open the Customer communication hub section from the "Contact Center Supervisor", "Case management", or "Service" workplace.

2. Click a channel in the list to open its settings page.

3. Use the Channel status area above the tabs to activate or deactivate the channel (optional).

4. Click the General Info tab to update the channel name, queue, or language in the Channel details expansion panel (optional).

5. Click the Appearance tab to update the chat widget's branding (optional).

   Change the primary color, logo, welcome message, and header title against a live preview of the chat widget. The header title supports multiple languages, so each visitor sees it in their own language. A PNG or SVG logo with a transparent background, 80×80 px, looks best. Use the Layout expansion panel to set the Widget position ("Right" out of the box, or "Left") and the chat widget's distance from the screen edges in the Side spacing, px and Bottom spacing, px fields (16 px out of the box, from 0 to 200). These settings apply to the desktop view. On mobile devices, the launcher and the chat widget always appear at the bottom right of the screen.

6. Click the Installation tab to manage the embed code and allowed domains.

   Copy the embed code and paste it on your company website just before the closing </body> tag. Add your company website's domain to the allowed domains list before you go live — the chat widget doesn't load on your company website until you do. You can also embed the same chat widget in a mobile app through a WebView. It loads in full-screen mode suited for in-app use, and the same embed and allowed-domains rules apply.

7. Click the Security tab to update the privacy notice and policy URL (optional).

   Use the Privacy notice expansion panel. The Privacy notice text appears at the bottom of the chat widget and can be localized per language. Out of the box, the field is empty and shows "By using this chat, you agree to our privacy policy." as a placeholder. The Privacy policy URL adds a link that opens your policy in a new browser tab. The URL must start with http:// or https://.

8. Click the AI Automation tab to adjust the AI personality or audience rollout (optional).

   The Audience rollout percentage sets the share of incoming chats AI handles. The rest go to agents.

9. Save your changes in the top panel.

As a result, Creatio applies your changes to the chat widget on your company website. If you added your company website's domain and pasted the embed code, visitors on that website can now start chatting through it.

Additional web chat settings

The chat widget on your company website is cloud-hosted. Visitors and agents can exchange files and images, and visitors can add emojis to their messages. Visitors can send JPG, JPEG, PNG, GIF, WEBP, PDF, DOC, DOCX, XLS, XLSX, TXT, CSV, and ZIP files. Out of the box, the maximum attachment size is 10 MB, controlled by the "Attachment max size" (MaxFileSize code) system setting — even if you raise it, the chat applies a hard cap of 25 MB. Disallowed file types are controlled by the "File extensions DenyList" (FileExtensionsDenyList code) system setting. After you change these system settings, save the channel on its settings page again to apply the new limits to the chat widget.

The chat widget header shows the header title. Below it, visitors see the name of the AI personality while AI handles the chat, or the name of the agent after an agent accepts the chat. The photo comes from the agent's contact or, while AI handles the chat, from the contact of the AI technical user. If the contact has no photo, the chat widget shows the header logo. When a chat is transferred to a queue, the header keeps the previous agent until another agent accepts the chat.

Visitors can start a new conversation from the chat widget on your company website. After they send a message, the button appears in the chat widget header. When the visitor clicks it, the chat widget asks them to confirm with the "All history with agent will be cleared." message. Clicking New completes the current chat, and the visitor's next message creates a new chat.

The agent "typing" indicator timeout is controlled by the "Web chat agent typing timeout (ms)" (WebChatTypingExpirationMs code) system setting. It defaults to 5000 ms when not set, and the chat widget enforces a 5-second minimum. The "Web chat default logo" (WebChatDefaultLogo code) system setting sets the logo assigned by default when you create a new channel, used until you upload your own.

---

See also

Set up chat routing

Chat workflow

Set up the WhatsApp channel via Twilio

Set up the WhatsApp channel via Meta Cloud API

Set up the SMS channel

Set up the Telegram channel

Set up the Facebook Messenger channel

Set up Ada AI chatbot

---

Resources

Tech Hour - Web Chat Channel