Webchat
Deploy an AI assistant to websites.
Publishing an AI assistant to Webchat, Proto's embeddable chat interface for websites. This allows your audience to interact with the assistant—and subsequently with live reps—directly from the web.
In the assistant's Publish tab, create a Webchat channel or select an existing one from the table to open its settings.
Basic Settings
In the Basics accordion, the following options are available:
Name — the internal name of the channel, used to distinguish from any other Messenger channels the assistant is published to.
Default chat language — the language used by the AI assistant at the start of a new chat. Available languages are set in the assistant's General settings.
Icon — the channel's avatar seen by live reps in the Inbox dashboard.
Allow attachments — toggles if files and images can be uploaded to the chat.
Enable voice — toggles if voice messages can be submitted in addition to text.
Enable emojis — toggles if an emoji selection menu is available to text input.
Hide webchat if no live reps online — toggles if the embedded webchat will appear on webpages or not depending on one or more live reps being online.
Press Save to confirm edits.
Proactive Messages
See Proactive Messages, where the AI assistant can send the initial popup message to engage website visitors.
Brand
In the Brand accordion, customise and preview the Webchat popup's aesthetics:
Welcome Screen
The welcome screen is an optional page that precedes the chat interface.
Enable welcome screen — toggles whether to include the welcome screen.
Title — the welcome screen heading.
Description — the welcome screen subtitle.
Start chat button — the content of the button used to launch a new chat.
Chat Screen
The chat screen is where all messaging occurs.
AI assistant display name — the name of the AI in the header. If left empty will default to the Name defined in the Basic settings above.
Description (for each of the AI assistant and live rep) — subtext under the name in the head, e.g. "Replies immediately".
Message placeholder — the placeholder text in the prompt input field.
Styles
Border radius — a slider to set the roundness of the popup corners.
Header colour — background colour of the headers.
Message colour — background colour of the person's message bubbles.
Buttons colour — used for buttons and quick reply options.
AI assistant icon — the avatar used in the popup toggle button, chat screen header, and next to AI messages.
Popup toggle button — toggles whether the toggle button is a circle or rounded square.
Popup position — toggles whether the popup embeds on the bottom right or bottom left of the screen.
Press Save to confirm all edits.
Pre-Chat Form
In the Pre-Chat Form accordion, define and preview a form that begins chats:
Enable pre-chat form — toggles whether the form is applied before new chats.
Message — the title of the form.
Button text — the form submit button's content.
Form fields — add, rearrange, set placeholder text, and delete form fields with the respective buttons. Also toggle whether or not a field is Required to submit the form. When adding a field, choose from the following types:
Name
Email
Phone number
Any custom fields for people.
Press Save to confirm edits.
Mobile Behaviour
In the Mobile Behaviour accordion, configure the Webchat appearance on devices with small screens:
Mobile screen width threshold — the mobile breakpoint. Screens with a width resolution equal to or smaller than this value will use these settings.
Set whether the Webchat popup appears or not:
Fullscreen on mobile — Webchat appears as a fullscreen popup when toggled open.
Hide on mobile — the Webchat toggle button and popup are removed.
Mobile size — when Fullscreen on mobile is set above, the popup is sized with the Width and Height, defined as a percentage of the viewport resolution.
Test & Deploy
In the Setup accordion, follow the Test link to interact with the AI assistant in a webchat sandbox page.
To deploy, copy the the Deploy script from the accordion and paste it anywhere into the <body>tag of the webpages it should appear in. It will embed as a toggleable popup on the bottom right of the page.
Last updated