Installing the Sunshine Web Messenger

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

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).
   • To obtain your Language I/O API Key, request it from your Language I/O Customer Success Manager.
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

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:
      
2. You should see the three values of the Conversation API Key (App ID, Key ID and Secret Key):
   
   
   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 I/O',
     }
     
     });
     }
     initClient();
</script>