Quickly create a Cloud Contact Center web channel

Prerequisites

Before creating a web channel, activate Cloud Contact Center.

Procedure

Create an instance and access Network Services

1. Log on to the Cloud Contact Center console. In the navigation menu on the left, select Instances-V2 to go to the instance management page.

2. Click Create and fill in the form. Click OK to complete instance creation.

   • Name: Enter a custom name. Instance names must be unique under the same Alibaba Cloud account.

   • Endpoint: Use a unique domain name. This cannot be changed after creation. For convenience, use a memorable English company name.

   • Description: Enter a custom description of your Cloud Contact Center service.

   • Agent type: Choose between human agents and digital employees based on your business scenario.

   Contact center phone number: Select a Cloud Contact Center number. If you choose a 400 number, outbound calling is not supported.

   Note

   In web channels, ignore the Contact center phone number field. This field applies only to Cloud Contact Center Voice channels.

   • Administrator: By default, the user who creates the instance becomes the administrator. You can add other administrators by importing from RAM or creating new administrator accounts. Administrators can manage configuration settings for the Cloud Contact Center instance.

3. Click the endpoint of your instance to access it.

4. Click Web Channel to open the web channel workspace.

   In the top-right corner of the workspace, click the grid icon to expand the navigation menu. You will see the Web Channel entry in the menu.

Create a skill group

1. In the navigation menu on the left, select Agents > Skill Groups.

   In the top-right corner of the Skill Groups page, click Add.

2. Click Add. Enter a custom Skill Group ID and Name. Select a Media Type and add a Description. Click OK to complete skill group creation.

Create an agent

1. In the left menu bar, select Personnel > Agents.

   In the top-right corner of the Agents page, click Add.

2. Click Add and fill in the form. Click OK to complete agent creation.

   • Username: The username the agent uses to log on to the system.

   • Reset password: Set the agent’s initial password. The agent can change it during their first logon.

   • Full name: The agent’s real name.

   • Employee ID: A unique ID assigned to the agent within your organization.

   • Phone number: The agent’s contact number.

   • Email: The agent’s email address.

   • Role: Assign the agent a role in the system. Common roles include Administrator, Agent, and Skill Group Leader. Administrators have full permissions to manage the system and other users. Agents handle general customer service tasks. Skill Group Leaders manage specific skill groups.

Add an agent to a skill group

1. Click Details in the Skill Group column for the target agent to open the edit interface.

2. Click Add Skill Group, select the desired skill groups, and set the skill group level as needed.

   Note

   The skill group level identifies how skill groups are categorized based on responsibilities and permissions in your business.

3. Click OK to complete the addition.

Integrate a web channel

1. In the navigation menu on the left, select Integration > Channels to open the Channel Management interface.

2. Click Add Channel, then select Web to open the Web Plugin Management interface.

3. Complete the configuration based on your business needs.

   Basic settings

   Basic settings include essential information and parameters configured during initial channel setup. Common options include the following:

   • Channel name: A label that identifies the channel and distinguishes it from others. For example, name a web channel “Web Support” or a DingTalk channel “DingTalk Support”.

   • Profile picture: An icon or image representing the channel in the interface. Choose one that aligns with your brand or channel type to improve user recognition and experience.

   • System name: The name displayed to end users.

   • Profile picture redirect URL: The link users navigate to when they click the profile picture.

   • Message type: The types of messages the channel supports, such as images, files, or voice messages, based on the channel’s technical capabilities.

   • Select handling skill group: Assign a skill group to handle incoming interactions for this channel. Each channel supports routing to one skill group, but multiple channels can route to the same skill group.

   • Business days and holidays: Toggle this setting to enable or disable routing based on business hours. When enabled, no routing occurs outside business hours (you can update business hours in Settings > Business Hours Schedule). When disabled, routing works regardless of the day.

   After completing basic settings, click Next.

   Style

   Style settings include title, description, theme color, message color, button style, and Alibaba Cloud logo display. Adjust these as needed. After configuration, click Next.

   The Style page also includes settings for Web Page Title, Title Bar Style (Default or Custom), Title Color, Title Background Color, PC Window Size, PC Background Image, and Input Placeholder Text. The right-side preview panel shows real-time updates. Content entered in the Title and Description fields appears directly in the preview window’s title bar.

   Replies

   A reply refers to the question-and-answer interaction between the bot and the user.

   • Enable chatbot for auto-reception

     • If you haven’t purchased a Chatbot, buy one first. Contact customer support via DingTalk ID: cccsupport2. Once enabled, users contacting this channel are served by the chatbot first. If you haven’t purchased a Chatbot, the page displays You have not purchased a Chatbot, and you must complete the purchase first.

     • If you’ve purchased a Chatbot, select an associated workspace. If you have multiple Chatbot workspaces, choose one from the dropdown list.

     • Show answer source: When enabled, the chatbot displays the source of its answers. Users can click to view the source content.

     • Show AI disclaimer: When enabled, responses generated by a Large Language Model (LLM) include the note “This content was auto-generated by AI.”

   • Configure chatbot welcome messages

     • Chatbot welcome message: The greeting sent by the chatbot when a conversation starts. You can customize this text.

     • Off-hours welcome message: The automatic reply shown when users request human support outside business hours. You can customize this text.

     • Transfer prompt: The automatic reply shown after a user submits a request to speak with a human agent. You can customize this text.

   • Transfer to Human Agent System Message Settings

     • Queue position announcement: Shows the user’s current position in the queue. You can customize the announcement text.

     • Agent prompt configuration: Displays the current agent’s name. You can customize the prompt text.

   • Card settings: Configure quick-reply templates.

   Card settings include the following toggle options: Promotion Templates, Suggested Questions, Category Templates, Skill Cards, Quick Phrases, Pinned Announcements, Operations Widgets, PC FAQ Settings, and PC Developer Tools Settings. Each option can be enabled or disabled independently. Click the Configure link on the right to adjust details. When Promotion Templates is enabled, promotion cards appear in the chat window. When Skill Cards is enabled, skill tabs appear at the bottom of the chat window.

   After completing configuration, click Next.

   Important

   • You can quickly configure the knowledge base for the Agile Edition Chatbot directly in Cloud Contact Center without visiting the Chatbot console. Documents and websites linked to the chatbot appear below and can be added or deleted.

   • You can upload up to 10 documents and 1 website URL as knowledge sources for Q&A.

   • The chatbot automatically parses document and website content to answer user questions. No manual intervention or model training is required.

   • If you purchased a different Chatbot edition, manage it in the Chatbot product console. Use the provided link to navigate there quickly.

   Authorization

   Authorization controls access permissions for historical conversations when configuring a channel:

   • View conversation history: When enabled, users can view conversation records from the past 3 days, helping agents better understand customer needs.

   • Delete history: When enabled, agents can clear the current conversation history to protect privacy and start fresh.

   • Show read receipts: When enabled, customers can see whether their messages have been read.

   • Message recall: When enabled, customers can retract messages sent within the last 2 minutes.

   After completing settings, click Save Configuration and Install.

   Installation

   You can install a web channel in two ways: as a plugin or by embedding an H5 page. Choose based on your business needs.

   Method 1: Install plugin — Embed the provided <script> tag into your target webpage. Method 2: Embed H5 page — Copy the provided H5 link (which includes a token parameter) and integrate it into your target page. You can append the userId and userName parameters to customize the customer ID and name. The page also offers options for WeChat H5 deployment (click WeChat Authorization Management to add a WeChat authorization file) and Douyin H5 deployment. Use the real-time preview panel on the right to view the chat window.

Test channel

1. Click Test Now to open the test window from the customer perspective. The result appears as follows:

   In the test window, after the user sends transfer to agent, the system replies automatically with “OK, connecting you to a technical expert. Please wait.” and adds the note “This content was auto-generated by AI.” An agent is then successfully assigned, completing the human transfer process.

2. Click My Workspace to open the conversation window from the agent perspective. Click the conversation message to view details.

   In the All Conversations list under the In Service tab on the left, you can see pending visitor conversations.

   In the agent workspace, view the full conversation flow: after the visitor sends “transfer to agent,” the AI auto-generates a response and initiates the transfer (showing the answer source and the “This content was auto-generated by AI” note). The agent then joins the conversation. The top of the window displays the visitor’s nickname, location, and service duration. The Transfer button in the top-right corner lets the agent transfer the conversation to another agent.