1. Language IO
  2. Zendesk Support
  3. Zendesk Chatbot

Articles in this section

Installing the Sunshine Web Messenger

To install the Language IO Sunshine Web messenger in your Zendesk, you have to replace some code in the Zendesk Guide theme that you use.

Caution: This operation requires the edition of markup and code snippets. You must be a Zendesk administrator and be familiar with javascript to perform these operations.

To do this, follow these steps:

  1. Connect to your Zendesk Guide dashboard and go to the theme section.
  2. Select “Customize design” from the sidebar and click “Customize” on the desired theme.

  3. Next, click “Edit code” at the bottom of theme editing dashboard.

    Note: When editing your theme’s code for the first time, you will be presented with a modal with additional information. Click “Access code” to continue.
  4. Add the custom Sunshine Conversations javascript code to the footer of your theme:
    1. Select “footer.hbs” from the sidebar.
    2. Paste the code just before the ending footer tag </footer>:
      <script type="module"> 
           async function initClient() { 
            
           await import(`https://cdn.golinguist.com/lib/psc/latest/client.js`); 
            
           const lioModule = await import(`https://zd.golinguist.com/live/zd-chat.js?c=${new Date().getTime()}`); 
           lioModule.initLIOChatBot({ 
           integrationId: 'ABC', 
           apiKey: 'DEF', 
           clientId:'GHI', 
           clientSecret: 'JKL'}); 
           } 
            
           initClient(); 
      </script> 
      1. integrationId is required. integrationId (appId) is mostly used as a parameter or path variable. This way it does not need to be secured as it cannot be used maliciously. eg. https://api.smooch.io/v2/apps/{appId}/conversations/{conversationId}/messages)
      2. clientId and clientSecret come from LIO AWS Cognito. Contact your Customer Success Manager to request it.
    3. To see what other properties you can configure, see GitHub - zendesk/sunshine-conversations-web.
    4. Pass the c query parameter with date timestamp to purge the cache.
    5. Click Publish to save and publish the page.

Authentication & Customization

  1. You must have a valid Integration ID (integrationId).

    • To get the Integration ID, you must call a Zendesk Rest API with a Conversations API Key. For more information, see "Obtaining the Zendesk Integration ID" below.

      Note: The Integration ID is mostly used as a parameter or path variable. It does not need to be secured because it cannot be used maliciously.
  2. You must have a valid API Key (apiKey).
  3. (Optional) You can customize the following ChatBotOptions parameters:
    ChatBotOptions { 
         soundNotificationEnabled?: boolean 
         customColors?: { 
              brandColor: string 
              conversationColor: string 
              actionColor: string 
         }, 
         businessName?: string | null 
         businessIconUrl?: string | null 
         backgroundImageUrl?: string | null 
    }

Obtaining the Zendesk Integration ID

Reminder: Before you start, you must have the Conversation API enabled. Contact your Zendesk representative to request it if you do not see it in your Admin Dashboard.
  1. First, you must create a Conversations API Key in Zendesk:
    1. Login to your Zendesk admin dashboard and go to Apps and Integration > Conversations API.
    2. Click Create an API Key:
      Screenshot

  2. You should see the three values of the Conversation API Key (App ID, Key ID and Secret Key):
    Screenshot

    Tip: See the Official Sunshine documentation for additional reference.
  3. Next, use these values to call a Zendesk Sunshine Rest API GET request at https://api.smooch.io/v2/apps/{{app_id}}/integrations, where {{app_id}} is your Conversation API App ID.
    The following example uses curl, but you can also use Postman:
    curl --location 'https://api.smooch.io/v2/apps/63dd364565393f010ccd02d0/integrations' \ --header 'Accept: application/json' \ --header 'Authorization: Basic YXBwXzYzZTJiMDE2OGJkYmEwMDExYTI5ZjhmOTpnU0xDbUYxei1OMWFVN2V0S3JKWjR1N01PWjlEWnZnNFc4eUpubDBXYjNmZlZoVU44WDFqenRzQkU4eEg0ZlItRDMxUnhxSFdvYVFMV2UtbUg3QWZwUQ=='
  4. Retrieve the Integration ID from the response that you receive. It is usually the first entry in the response list. This is the integrationId that you need to initialize the chat bot plugin.

Code Sample

Here is a sample code example configured with custom parameters:
<script type="module"> 
     async function initClient() { 
      
     await import(`https://cdn.golinguist.com/lib/psc/latest/client.js`); 
      
     const lioModule = await import(`https://zd.golinguist.com/live/zd-chat.js?c=${new Date().getTime()}`); 
     lioModule.initLIOChatBot({ 
     integrationId: '123456', 
     apiKey: '456789', 
     clientId:'2345', 
     clientSecret: '12345', 
     chatbotOptions: { 
     soundNotificationEnabled: true, 
         brandColor: 'a50b5e', 
         conversationColor: '660018', 
         actionColor: 'ff003d' 
     }, 
     businessName: 'Language IO', 
     } 
      
     }); 
     } 
     initClient(); 
</script>

Related articles