Create a Webchat v3 Endpoint
- In the left-side menu of the Cognigy interface, select a Project.
- In the left-side menu of the Project, go to Deploy > Endpoints.
- On the Endpoints page, click + New Endpoint.
- In the New Endpoint section, do the following:
- Select the Webchat (v3) Endpoint type.
- Specify a unique name.
- Select a relevant Flow from the list.
- Click Save.
Configure General Settings
The following general settings are available within this Endpoint:- Endpoints Overview
- Data Protection & Analytics
- Transformer Functions
- NLU Connectors
- Session Management
- Real-Time Translation Settings
- Agent Copilot
- File Storage
- Copilot
Supports Inject and Notify
Supports Inject and Notify
Configure Specific Settings
Customize Webchat to meet your specific needs. You can adjust colors and add features such as file uploads to enhance the effectiveness of your AI Agent. Any updates you make will be instantly and seamlessly reflected when you load or reload your website with Webchat linked to the Endpoint.Style Presets
The Style Presets settings offer predefined dimensions and text display behavior for the Webchat widget. The style presets allow you to quickly customize your Webchat widget without the need to manually adjust the CSS customization settings, the Advanced Layout settings, or the Webchat Layout settings. You can select the following style presets:Classic: The classic, smaller Webchat widget with bordered AI Agent messages.
Modern: A larger, wider Webchat widget with borderless AI Agent messages.
Slick: A larger but narrower Webchat widget with bordered AI Agent messages with a grey background.
Classic
Classic
Modern
Modern
Slick
Slick
Webchat Layout
The Webchat Layout settings offer parameters for changing the Webchat Layout, including options to customize the title and logo of the Webchat interface. Additionally, settings outline a forthcoming feature allowing separate logos and names for messages from AI and human agents.Webchat Icon
The Webchat Icon settings allow you to customize the icon displayed on your website to open the Webchat widget. Additionally, you can animate the icon and set the animation frequency and speed. After setting the icon animation, you can preview the animation in the icon field.Colors
The Colors settings let you customize the Webchat v3 interface, including the primary and secondary colors. Additionally, settings outline forthcoming features: background color adjustments for the chat interface, AI Agent messages, user messages, and text links.Persistent Menu
The Persistent Menu settings ensure quick access to different conversation stages, guide users, offer features, share information, and enhance the overall user experience.Advanced Layout Settings
The Advanced Layout settings provide parameters for managing the chat interface, focusing on input behavior, HTML styling, and JavaScript.Webchat Behavior
The Webchat Behavior settings enhance communication by enabling typing indicators, customizing input text, enabling Speech-To-Text, Text-To-Speech features, adjusting message delay, ensuring focus after interaction, and alerting users to internet connection status.Start Behavior
The Start Behavior settings offer features for initiating conversations that include starting with a text field, button click, or automatic message, with customization options available.Attachment Upload
The Attachment Upload settings offer features to upload files in Webchat, customize the upload area text, and choose where files are stored, such as AWS, Azure, or Google Cloud, along with the necessary connection credentials.Business Hours
The Business Hours settings help manage business hours in Webchat. They enable you to restrict Webchat availability by specifying behavior outside business hours, customize messages, set the time zone, and define operational days.Unread Messages
The Unread Messages settings help users stay informed about unread messages in Webchat. They include features such as displaying message counts, previews, and notification sounds for timely responses.User Inactivity
The User inactivity settings allow Webchat to detect when an end user goes silent after a Node that expects an input, for example, Question, Optional Question, or Wait for Input Nodes. After the timeout configured in the Enable User Inactivity Node, Cognigy.AI considers the user inactive and injects an input into the Flow with the text and data configured in this section. Use it to re-prompt the user, route abandoned conversations, or end them cleanly. User inactivity events are written to the Logs page with the[User Inactivity] prefix.
Injected Input Example
Injected Input Example
- Webchat v3 Endpoint:
- Injected text โ
The user has been inactive - Injected data โ
{"reason": "no_reply"}
- Injected text โ
- Enable User Inactivity Node:
- Timeout โ
30
- Timeout โ
userInactivity object contains the following fields:Build a Flow with User Inactivity Handling
The following example Flow asks the user whether they are ready for their order and handles a user who doesnโt respond.1. Configure the Endpoint
1. Configure the Endpoint
- In the left-side menu of the Project, go to Deploy > Endpoints and open your Webchat v3 Endpoint.
- On the Behavior tab, in the User inactivity section, turn on Activate user inactivity.
- In the Action list, select Inject into current Flow.
- In the Injected text field, enter the text that the Flow receives when the user is inactive, for example,
You seem to have disconnected. - Optional. In the Injected data field, enter a JSON object, for example,
{ "reason": "no_reply" }. - Save changes.
2. Greet the User
2. Greet the User
- In the Flow editor, add the AI Agent Node.
- In the AI Agent Node, configure the AI Agent to greet the user, for example, with a short welcome message.
- Save changes.
3. Activate User Inactivity Detection
3. Activate User Inactivity Detection
- Below the Default Node of the AI Agent Node, add the Enable User Inactivity Node.
- In the Timeout field, specify
60. This sets the timeout to one minute. - Save changes.
4. Ask the User
4. Ask the User
- Below the Enable User Inactivity Node, add the Question Node.
- In the Question Type list, select Yes / No.
- In the Output Type list, select Text with Quick Replies.
- In the Text field, enter
Are you ready for your order?. - Click the Yes quick reply and do the following:
- In the Select Button Type list, select Postback Value.
- In the Postback Value field, enter
yes.
- Click the No quick reply and do the following:
- In the Select Button Type list, select Postback Value.
- In the Postback Value field, enter
no.
- Save changes.
5. Handle the Answer
5. Handle the Answer
- Below the Question Node, add the If Node.
- In the Condition field, click Use Advanced Editor and enter
input.result === false. - Below the Then child Node, do the following:
- Add the Disable User Inactivity Node. This stops the inactivity detection, so the user isnโt prompted while they get ready.
- Below the Disable User Inactivity Node, add the Say Node and enter the text
Okay, I'll wait. Just let me know when you are ready..
- Below the Else child Node, do the following:
- Add the Question Node.
- In the Question Type list, select Text.
- In the Text field, enter
What would you like?. This Node waits for the userโs answer. If the user doesnโt respond within the timeout, the injected inactivity input answers the question. - Below the second Question Node, add the Say Node and enter the text
{{input.text}}. This token outputs the injected text from the Endpoint settings.
- Save changes.
6. Test the Flow
6. Test the Flow
- Open Demo Webchat for your Endpoint.
- When the AI Agent asks
Are you ready for your order?, select Yes. The AI Agent then asksWhat would you like?. - Donโt type or send anything for longer than one minute.
- Check that the AI Agent responds with
You seem to have disconnected. - On the Logs page, check for entries that start with
[User Inactivity]. They report when inactivity is detected and the input is injected. - Start a new conversation and answer
No. Check that the AI Agent responds withOkay, I'll wait. Just let me know when you are ready.and that no inactivity message follows after one minute, because the Disable User Inactivity Node turned detection off.
Home Screen
The Home Screen settings enable personalization of welcome messages, backgrounds, and button texts, creating a user-friendly and brand-aligned initial chat interface.Conversation Starters
The Conversation Starters settings offer pre-defined messages to prompt interactions with AI Agents, enhancing user engagement and streamlining conversation flow. You can customize messages, choose an interaction type (Postback Value or URL), and add up to 5 starters.Previous Conversations
The Previous Conversations settings enable users to access past interactions with the AI Agent within the last 30 days through a dedicated button on the home screen. You can customize the conversation screenโs button text and header to enhance usability and personalization.Teaser Message
The Teaser Message settings include personalized teaser messages, the display of conversation starters, and the ability to define specific actions upon user interaction, such as sending messages or directing users to URLs.Chat Options
The Chat Options include enabling chat features, such as quick replies and conversation rating, as well as adding a footer section for additional information or navigation links.Enable Chat Options
The Enable Chat Options settings offer features such as Quick Replies, Conversation Rating, and Footer, enhancing user interaction. You can customize the title of the Chat Options screen to personalize the user experience.Enable Delete Conversation
By default, end users canโt delete conversations in the Webchat widget. To allow end users to delete the current conversation, activate the Enable Delete Conversation parameter. After activation, they can delete the current conversation on the Chat Options screen. If you want your end users to be able to delete all conversations, configure the Enable Delete All Conversations parameter in the Previous Conversations section. Note that after deletion, the conversation will be removed from the Webchat widget on the end userโs side but will still be available in the Cognigy OData endpoint, Insights, and Contact Profile.Quick Replies
The Quick Replies settings improve chat interactions with pre-defined response options that users can customize, manage, and use to direct users to URLs or trigger specific responses, enhancing the overall conversational experience.Text-to-Speech
The Text-to-Speech settings allow you to convert text to speech, with options to customize the toggle label and set the toggle to be enabled by default.Conversation Rating
The Conversation Rating settings include a chat rating widget that lets users rate their experience and provide feedback. You can customize text prompts and confirmation messages to ensure a user-friendly feedback process.Footer
The Footer settings offer a customizable footer section to the chat interface. You can set a custom title for the footer, specify a URL for redirection upon clicking, and add up to 2 title-URL pairs for additional content.Privacy Notice
The Privacy Notice settings add privacy notices to the chat interface. It includes options to enable a custom Privacy Notice, set its title and text, customize the Submit button, define the link title and URL for the Privacy Policy. These features ensure users are informed about data handling practices and consent to them, fostering trust and compliance with privacy regulations. Cognigy automatically records user acceptance of the Privacy Notice in the Contact Profile. Accepting the privacy notice in the chat doesnโt count as a user input in terms of billable conversations.Advanced Settings
The Advanced settings offer customization features like adding watermarks and activating maintenance mode for transparent communication during updates. Webchat Custom Settings further enhance customization by allowing specific UI adjustments and feature integrations through JSON formatting.Watermark
The Watermark settings allow users to personalize their chat interface with a watermark that suits their branding or platform, enhancing recognition and customization options.Maintenance
The Maintenance settings offer activating maintenance mode in a chat service, including notification, disabling, or hiding options. It allows for the customization of maintenance-related messages displayed to users.Webchat Custom Settings
The Webchat Custom settings offer advanced options to change the appearance and behavior of your webchat beyond the standard settings. These settings are specified using JSON format. Ensure the JSON is correctly formatted to prevent any potential crashes of the Webchat widget. Use the Webchat Custom settings to:- Overwrite UI text and values configured in the Endpoint settings
- Change and translate UI text and aria labels. You can use dynamic strings, such as
{name}or{time}, as described in the embedding documentation. - Add values from embedding files not present in the GUI.
- Specify parameters for your custom Webchat version.
- Use features from a later Cognigy version while using an earlier one.
JSON Example: Change Webchat Colors
JSON Example: Change Webchat Colors
JSON Example: Translate Webchat Texts
JSON Example: Translate Webchat Texts