How to Implement Multiple Qiscus Widget with Custom Badge?

  • Updated

Qiscus Widget on Multichannel CS Chat can now be embedded on several websites, Android apps or even iOS apps. However, the source of the widget is unknown. Users cannot distinguish widgets from one website / mobile app with widgets from other websites / mobile apps. By adding the badge, you can solve the problem.

Web Widget Implementation

  1. Copy the widget code in the Code Snippet, then paste it on your website.
  2. Add configuration for “roomBadge”. Fill “roomBadge” with your room icon. The "roomBadge" is used to identify a chat room from which website.
    <script>
    document.addEventListener('DOMContentLoaded', function() {
    var s,t; s = document.createElement('script'); s.type = 'text/javascript';
    s.src = 'https://s3-ap-southeast-1.amazonaws.com/qiscus-sdk/public/qismo/qismo-v2.js'; s.async = true;

    //ADDITIONAL CONFIGURATION TO ADD CUSTOM ROOM BADGE
    s.onload = s.onreadystatechange = function() { new Qismo("your-app-id", { "roomBadge": "https://your-room-icon-40x40-until-80x80.png" }); }
    t = document.getElementsByTagName('script')[0]; t.parentNode.insertBefore(s, t);
    });
    </script>
  3. If you want to embed Qiscus Widget on another website, you can do it like the first and second steps.
  4. The following is an example on the inbox page if the widget originates from several websites.
    Group_30.png

Other Service Implementation

  1. To create room you must hit initiate chat api:
    [POST] https://qismo.qiscus.com/api/v1/qiscus/initiate_chat 
  2. Add parameter “room_badge”
    Params:
    'app_id' => 'required',
    'nonce' => 'optional',
    'user_id' => 'required|email',
    'name' => 'required',
    'ignore_agent_availability' => 'boolean|nullable',

    //ADDITIONAL PARAMS TO ADD CUSTOM ROOM BADGE
    'room_badge' => 'nullable',
    Response:
    {
    "data": {
    "identity_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsInZlciI6InYyIn0.eyJpc3MiOiJvbmktYmdvMmx1bW1taHZ6cXhidDUiLCJwcm4iOiJzdWxhcnRpQGdtYWlsLmNvbSIsImlhdCI6MTU1MTMyOTc3MywibmJmIjoxNTUxMzI5NzczLCJleHAiOjE1NTEzMjk4OTMsIm5jZSI6InlScGVsYnE4RGp5MmhKMjAzREJGWnZYMWR4WmFNalFCbjFCREU5NFEiLCJuYW1lIjoic3VsYXJ0aSIsImF2YXRhcl91cmwiOiJodHRwczpcL1wvZDFlZHJscHljMjV4dTAuY2xvdWRmcm9udC5uZXRcL2tpd2FyaS1wcm9kXC9pbWFnZVwvdXBsb2FkXC93TVdzRFpQNnRhXC8xNTE2Njg5NzI2LWljX3Fpc2N1c19jbGllbnQucG5nIiwiZXh0cmFzIjoie1wiaXNfY3VzdG9tZXJcIjp0cnVlLFwidHlwZVwiOlwiY3VzdG9tZXJcIixcImFkZGl0aW9uYWxfZXh0cmFzXCI6XCJ7XFxcInRpbWV6b25lX29mZnNldFxcXCI6N31cIn0ifQ.iAA-elegSwFQjpxFL2jHm7ms8TgnnLb9cSiYnC_knRo",
    "room_id": "1998233",
    "sdk_user": null,
    "is_seasonal": false
    }
    }

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.