How to Integrate Mobile Chat on Omnichannel Qontak

Article author
Learning Center Mekari
  • Updated

The Qontak Mobile Webchat feature is a feature that functions so that customers can send chats without having to leave the application and open WA. So that customers only need to click certain buttons on the application to be able to communicate with customer service. To be able to implement it, you need to integrate this feature into your Qontak Omnichannel, here are the steps.

A. How to Install Widget

  1. Enter the Integration menu.
  2. Select the Mobile chat tab, then click “Create chat widget”.
    pasted image 0 (38).png
  3. Then, enter the App name you want to use.
    pasted image 0 (39).png
  4. Select the desired operating system.
    pasted image 0 (40).png

    You can add other operating systems by clicking “Add operating system”.
    pasted image 0 (41).png

  5. Enter the Package name for the Android operating system and the Bundle ID for iOS and click "Create" to save.
    pasted image 0 (42).png

    You can contact your developer team to get the Package name and Bundle ID.

  6. Then the widget installation has been successfully carried out. Next, you need to ask your development team to enter all those details (App ID, Client ID, Secret Key) to your system.
    pasted image 0 (43).png

    - You can also change App Information by clicking the “pencil” icon.
    - For technical info you can click here.

B. How to Change Appearance

After the widget has been successfully created, then you can change the appearance of the mobile chat. Here are the steps.

  1. In the list of App names that you have created, click "Action" then select Edit.
    pasted image 0 (44).png
  2. To change the appearance, click "Widget content & appearance".
    pasted image 0 (45).png
  3. Next, you can change the existing display as follows.
    pasted image 0 (46).png

    No Column Explanation
    1 Display name Enter the display name you want.
    2 Description The description you have created appears in your customer's chat view in the chat header.
    3 Greetings The greetings you create will appear the first time a customer sends a message. These greetings are not counted as bots so they will not affect auto responders.
    4 Appearance

    You can adjust the color (room chat), agent message color (bubble chat from agents), customer message color (customer bubble chat).

  4. You can see a preview of the view you changed on the right. And if all the settings are correct, click “Save changes”.
    pasted image 0 (47).png

C. How to Add Push Notifications

After creating the widget, you can also add push notifications to customers. So if you reply to a message from a customer, the customer will get a notification. Here are the steps.

  1. In the list of App names that you have created, click "Action" then select Edit.
    pasted image 0 (48).png
  2. To add notifications, click “Push notification”.
    pasted image 0 (49).png
  3. Add the FCM survey key that you can get from your developer team then click “Add key”.
    pasted image 0 (50).png
  4. Enter the FCM server key you obtained and click “Add” to add it.
    pasted image 0 (51).png
  5. Then the push notification has been successfully added. You can also change it by clicking "Edit".
    pasted image 0 (52).png