How to Create, Integrate, and Customize Qontak Web Chat

Updated December 18, 2023 08:45

Integrations are a Qontak Omnichannel feature where customers can connect various platforms with chat panels such as email or Instagram.

Important
Only users with the Admin role can perform the integration. If you do not have an account with the Admin role, you can contact our support team at support-qontak@mekari.com.

To manage Qontak Omnichannel integration with WebChat on the Web, follow these steps:

A. How to Integrate WebChat with New Widget

On the Channel Integration menu, select Web Chat.
Select "Add widget".
You must fill in the widget name and domain then click "Connect" to go to the next process.
A pop-up will appear "Widget Created" as information that the data you entered has been created then click "OK" to close the pop-up.
A pop-up will appear Error according to the data discrepancy. An example of a pop-up that appears is as follows.

B. How to Manage the Content and Display of WebChat Widgets

On the Integration menu, select Web Chat.
Select “Action” in the list of widgets you want to manage, then click Set up widget.

On the Widget setup page, you can set the appearance of widgets on your website.

Description:

No.	Column Name	Description
1	Status widget	You can connect and disconnect integration to WebChat by pressing its toggle button.
2	Widget ID	This column contains a unique identification number for the Widget. You can copy it by clicking "Copy".
3	Widget name	This column contains the name of the widget that you have entered since the initial creation.
4	Domain	This column contains the widget domain that you have entered since the beginning of its creation.
5	Embed code	This field contains the Embed code of the widget. You can copy it by clicking "Copy".

Then, on the Widget appearance, you can upload your logo along with the widget colors.

Description:

No.	Column Name	Description
1	Widget logo	You can upload a logo for your WebChat widget here. Make sure the image you upload complies with the written requirements.
2	Main color	Select the main color here.
3	Main text color	Choose your text color here.
4	Agent bubble color	Select the color of the Agent's message bubble here.
5	Agent text color	Select the Agent's message text color here.
6	Visitor bubble color	Select the Visitor's message bubble color here.
7	Visitor text color	Select the Visitor's message text color here.

In the Widget content, you can adjust the message content from the available situations.

Description:

No.	Column Name / Button	Description
1	Widget content conditions	You can select the conditions for the available WebChat message contents, namely: When online: Contains settings for the contents of the widget message when the Agent is online. When offline: Contains settings for the contents of the widget message when the Agent is offline. Pre-chat form: Contains settings for the contents of the widget message to open before the chat starts. Greeting: Contains settings for the contents of the message widget to start a conversation with a greeting that you can customize.
2	Custom checkbox	Under any circumstances, you can check this column to replace the default with a message of your own making.
3	Text position	This option is only available in Greeting only. So, if you check the custom checkbox on Greetings, you can set the position of the following text. Top: The position of the text will be at the top of the message panel. Left: The position of the text will be on the left of the message panel.
4	Message (Content)	Enter your custom message here.
5	Save/Cancel	Save your message by clicking “Save changes” or cancel your settings by clicking “Cancel”.

You can see a preview of the widget that you have set on the right side of the page as follows.
After saving the Widget settings, you will return to the WebChat Integration home page. In addition, a notification appears, indicating that the Settings have been successfully saved.

C. How to Remove Widgets on WebChat

On the Integration menu, select Web Chat.
Select "Action" in the widget list that you will remove, then click Remove.
In the pop-up that appears, click "Remove".
Then, you will return to the WebChat Integration start page. In addition, a notification appears, indicating that the Widget has been successfully deleted.