Viewing and configuring Web Widget settings


What's my plan?




All Suites
Team, Growth, Professional, Enterprise, or Enterprise Plus








This article applies to the Web Widget for messaging. If you're using Web Widget (Classic), see Configuring components in Web Widget (Classic).

If you've created a Web Widget for messaging, you can configure and customize the Web Widget. You must be an admin to perform these tasks.
This article contains the following topics:

Accessing and editing the Web Widget settings
About the Web Widget settings




Accessing and editing the Web Widget settings

Web Widget includes multiple components that you can configure.
To access and edit the Web Widget settings


In Admin Center, click Channels in the sidebar, then select Messaging and social > Messaging.
Click the name of the Web Widget you want to update.
Click the tab with the components you want to customize:



Basics: Web Widget name, channel linking, and privacy notice

Style: Web Widget appearance

Responses Default messaging responses for customers

Preferences: Conversation history settings

Installation: Code snippet and help center embed








About the Web Widget settings

Web Widget settings are divided into the following tabs: Basics, Style, Responses, Preferences, and Installation.


About the Basics tab


The Basics tab includes the following:



Channel name is the name that appears in your channels list. The name field is automatically populated with the brand name, but you can update it to make it easier to find in your channels list.

Allow customers to switch channels lets you connect the Web Widget to your WhatsApp, Facebook Messenger, and Instagram DM channels, allowing your end users to start conversations via the Web Widget and continue them in the social channel of their choice. See Enabling customers to continue conversations through social channels.

Allow customers to call provides API information if you want to allow customers to call an agent in the Web Widget.

Allow customers to start multi-conversations lets customers multiple, separate conversations through the Web Widget or mobile SDK messaging channels. See Allowing multiple conversations for your end users.

Add a privacy notice includes a recording notice in the widget, and a link to your own notice, if available. See Adding a privacy notice.






About the Style tab

The Style tab is where you customize the name and appearance-related components of the Web Widget.
The tab has the following sections:


Frame settings control the name and appearance of the Web Widget itself.

Launcher settings control the look and feel of the launcher for the Web Widget.

For more information, see Configuring the appearance of the Web Widget.




About the Responses tab

The Responses tab is where you apply business schedules, customize default messaging responses, and add an AI agent.


Business hours allows you to apply Support schedules to your default responses.

Responses allows you to set a first greeting and a follow-up greeting, as well as determine the information you want to collect from customers.


For more information about these sections, see Configuring messaging responses for web and mobile channels.
At the bottom of the Responses tab, you have the option to add an AI agent to your messaging configuration (see Creating an AI agent for your web and mobile channels). If you've already created an AI agent, you have the option to deactivate it and return to the default messaging response.



About the Preferences tab

The Preferences tab is where you can set your Conversation history options.
If you choose to use the Conversation history feature for your customers, when an end user returns to the Web Widget where conversations with your business have already taken place, the full text of those conversations remains visible to them.
For more information about conversation persistence, see Understanding and managing handback events.




About the Installation tab

The Installation tab is where you get the code snippet to add the Web Widget to your website and automatically add Web Widget to you help center. From this tab, you can also turn help center authentication on and off.
For more information, see Installing the Web Widget for messaging and Turning help center authentication for messaging on and off.


Note: If you have already added the brand's Web Widget (Classic) to your website or help center, you don't need to take any action because the same code snippet is used. The messaging Web Widget replaces Web Widget (Classic) when messaging is turned on.







//
const fast_path_style = document.createElement('style');
fast_path_style.innerHTML = `#article-body .fastpath{font-size:.9em;background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 8px;margin-bottom:16px}#article-body .fastpath::before{content:none!important}`;
document.head.appendChild(fast_path_style);
//


//
const banner_style = document.createElement('style');
banner_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-wmp-link{text-align:right;font-size:.8em}#article-body .article-banners{margin-bottom:1rem}#article-body .article-banner{border:1px solid #ded7ca;background-color:#f6f0e6;margin:0 0 3px;line-height:1}#article-body .article-banner table{border-collapse:collapse;border:none;margin:0;width:auto}#article-body .article-banner td{padding:8px 6px 8px;border:none;font-size:.85em}#article-body .article-banner td:nth-child(2){border-left:1px solid #d0c9bd}#article-body .article-banner strong{font-weight:400;text-shadow:0 0 1px rgba(0,0,0,.5);letter-spacing:.5px}@media (min-width:1600px){#article-body .article-banner td{font-size:.8em}#article-body .docs-wmp-link{font-size:.7em}}`;
document.head.appendChild(banner_style);
//


//
const ai_summary_style = document.createElement('style');
ai_summary_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-ai-summary{background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 6px;margin-bottom:16px}#article-body #docs-ai-summary #docs-ai-summary-toggle{font-size:.9em;font-weight:700;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#article-body #docs-ai-summary #docs-ai-summary-toggle #up-triangle{margin-left:auto;padding-right:10px;display:none}#article-body #docs-ai-summary #docs-ai-summary-toggle #down-triangle{margin-left:auto;padding-right:10px}#article-body #docs-ai-summary #docs-ai-summary-content{font-size:.9em;padding-left:25px;padding-right:25px;margin-bottom:12px}`;
document.head.appendChild(ai_summary_style);

const toggleAISummary = () => {
const summary = document.getElementById("docs-ai-summary-content");
const upTriangle = document.getElementById("up-triangle");
const downTriangle = document.getElementById("down-triangle");
if (summary.style.display === "none") {
summary.style.display = "block";
upTriangle.style.display = "none";
downTriangle.style.display = "inline";
} else {
summary.style.display = "none";
upTriangle.style.display = "inline";
downTriangle.style.display = "none";
}
};

document.getElementById("docs-ai-summary-toggle").addEventListener("click", toggleAISummary);
//

