Skip to main content

Add a Web Chat channel

A Web Chat channel puts an agent behind a chat widget you embed on your website. Visitors open the widget, the bound agent answers in real time over a browser WebSocket connection, and you control which sites the widget is allowed to load on.

Creating the channel takes a site URL, the agent, and the environment. Everything else — the embed snippet, branding, and visitor capabilities — is configured on the channel page afterward.

note

Web Chat and Creatio Web Chat Widget are separate channel types. This article covers Web Chat. Choose Creatio Web Chat Widget instead when you need live-operator handoff alongside the agent. That type is enabled per organization, so it does not appear in every picker.

Create the channel​

  1. Go to the Channels section in the navigation panel.

  2. Click New. This opens the "Select Channel Type" dialog.

  3. Select the Web Chat card. It is described as "Real-time messaging via browser WebSocket." The form opens straight away.

  4. Fill out the channel fields.

    Field

    Field value

    Deployment site URL

    The page where the widget is embedded, for example, https://example.com. Creatio AI Studio reads the site and allows its domain automatically. A hint below the field confirms the result, for example, "This widget will load on example.com."

    Agent Binding

    The agent that processes incoming messages. Use the search box to find an agent. You can leave it unset and bind an agent later, but an unbound channel does not answer visitors.

    Environment

    The environment the channel serves. Set to "Sandbox" out of the box. A channel serves one environment at a time.

  5. Click Create Channel.

As a result, Creatio AI Studio creates the channel and opens its page. The form has no name field: the channel is named after the page title of the site you entered, for example, "Example Domain." Rename it on the Overview tab if that is not what you want.

Important

A channel with no agent bound shows the "No agent bound — incoming chats go unanswered" warning. Bind an agent on the Overview tab before you embed the widget on a live website.

Install the widget on your website​

  1. Open the channel from the Channels list.
  2. Go to the Installation tab.
  3. Review the allowed domains in the Allowed domains section. The widget loads only on the listed domains. The domain from the deployment site URL is added when you create the channel.
  4. Add another domain if needed. Enter the domain in the Add an allowed domain field, for example, example.com, and click Add.
  5. Copy the embed snippet from the Embed snippet section and paste it into the HTML of your website.

As a result, the widget loads on every allowed domain. Domain changes apply to the live widget when you save.

note

A widget needs at least one allowed domain. To take the widget offline, disable the channel instead of removing its last domain.

To check the widget before you embed it, click Try it live in the Test your widget section. This opens the widget on a sample page and adds that page's domain to the allowed domains so it can load. Remove the domain afterward if you do not need it. The test page asks you to sign in first, so only your team can open it.

Brand the widget​

This step is optional. Appearance settings control how the widget looks to visitors.

  1. Open the channel from the Channels list.

  2. Go to the Appearance tab.

  3. Fill out the appearance fields.

    Field

    Field value

    Brand color

    The widget's primary color, used for the header and the send button. Enter a 6-digit hex color, for example, "#FF4F17."

    Header logo

    An https:// URL to the logo image shown in the widget header.

    Header title

    Text shown at the top of the widget, for example, your team or product name.

    Welcome message

    The first message visitors see when they open the widget, for example, "Hi! How can we help?"

    Widget position

    The side of the screen the widget is anchored to: "Left" or "Right." Set in the Layout section.

    The Layout section also sets Side spacing (px) and Bottom spacing (px), from 0 to 200, set to 16 out of the box. The Privacy section carries the Privacy notice shown in the widget and the Privacy policy URL it links to.

  4. Click Save in the header.

As a result, Creatio AI Studio saves the settings, applies them to the live widget, and reports "Saved & applied to the live widget." If the widget cannot be reached, the changes are saved locally and a "Saved locally, not yet applied" message appears. Click Save again to retry.

To fill the brand color and logo automatically, select a domain in the Pull colors & logo from field and click Suggest from site. Creatio AI Studio reads the website and proposes values. Nothing changes until you review and save them.

Choose what visitors can do​

This step is optional. Out of the box, visitors can only exchange text messages.

  1. Open the channel from the Channels list.

  2. Go to the Capabilities tab.

  3. Turn on the capabilities you need in the Visitor features section.

    Setting

    Description

    Allow incoming attachments

    Lets visitors upload files in the chat so the agent can read their content. Turned off out of the box.

    Enable voice calls

    Shows a call button in the widget so visitors can talk to the agent. The calls are answered through the agent's voice channel, which runs the agent version published and deployed to its Environment, so bind that voice channel to an environment.

    Camera and screen share

    Lets visitors show their camera or screen so the agent can see it. Video rides the voice call, so voice calls must be on first. The source and quality are chosen on the voice channel, not here — this row reports the resulting state, for example, "On · camera," "On · screen share," "On · camera and screen share," or "Incomplete" when video is on but no source is selected. Click Configure to open the voice channel.

    Avatar

    Shows an animated avatar on a call. The avatar and its provider are chosen on the voice channel; this row reports whether one is in place.

    Camera, screen share, and avatar are enabled per organization. Where they are not yet turned on, the rows appear marked "Coming soon."

  4. Click Save in the header.

As a result, the widget offers the selected capabilities to visitors.

note

The avatar and the video source are configured on the voice channel, not here. The Capabilities tab reports their state and links to the voice channel when something is missing, for example, when no avatar is selected or the provider key is absent.

If the agent's voice channel is switched off, the Capabilities tab shows the "Voice channel is switched off — calls won't connect" warning. The warning names the voice channel, explains that every call is refused, and offers Open channel, so you can switch that channel back on rather than create a second one.

Change the agent or the environment​

  1. Open the channel from the Channels list.
  2. Go to the Overview tab.
  3. Change the agent in the Agent Binding field, if needed.
  4. Change the Environment field, if needed. A Web Chat channel serves one environment, so moving it from Sandbox to Production moves the whole channel, along with the widget already embedded on your site.

As a result, the channel routes its conversations to the agent and environment you selected.

See also​

Channels

Create a prompt agent

Creatio AI Studio overview