Last Updated on February 20, 2023
Zendesk’s Sunshine Conversations enables businesses to integrate messages from various channels into one continuous conversation and create interactive experiences across all platforms. By providing a unified API and built-in connectors for popular business tools such as Slack and Zendesk, every team within the organization can access a consolidated view of the customer conversation. This allows for streamlined communication and a cohesive approach to customer interactions.
Here we will cover how to integrate Kommunicate with Sunshine conversations.
First, we will cover the prerequisites for implementation.
1. Pre-requisites for Sunshine Integration
To test the Kommunicate-Sunshine integration, we have to follow a few initial steps.
- We need to first create an account on Sunshine. You can go to Sunshine login, and sign-up for a new account.
- Then create a new app and give any name to it.
- Now go to the settings tab and generate a new API Key for your app.
- We need Sunshine’s chat-SDK (from where we will send messages to Kommunicate). And for that, we must create a ‘web‘ integration with Sunshine. Here is the API for the same
curl --location --request POST 'https://api.smooch.io/v2/apps/{{sunshineAppId}}/integrations' \
--header 'Authorization: Basic Base64(api_id:api_secret_key)' \
--header 'Content-Type: application/json' \
--data-raw '{
"type": "web"
}'The API’s response will be something like this
Save “id” (integration-id) from here
- Then use this script and paste the above integration-id in the mentioned places.
- Now load this HTML script into the browser, Notice the Sunshine-chat-widget has been loaded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
!function(o,d,s,e,f){var i,a,p,c=[],h=[];function t(){var t="5";try{if(!f)throw new Error(t);var e,n="https://cdn.smooch.io/",r="smooch";e="string"==typeof this.response?JSON.parse(this.response):this.response;var o=f.match(/([0-9]+)\.?([0-9]+)?\.?([0-9]+)?/),s=o&&o[1],i=o&&o[2],a=o&&o[3],p=e["v"+s],c=e["v"+s+"."+i+".patch"];if(e.url||p||c){var h=d.getElementsByTagName("script")[0],u=d.createElement("script");if(u.async=!0,a)u.src=c||n+r+"."+f+".min.js";else{if(!(5<=s&&p))throw new Error(t);u.src=p}h.parentNode.insertBefore(u,h)}}catch(e){e.message===t&&console.error(e)}}o[s]={init:function(){i=arguments;var t={then:function(e){return h.push({type:"t",next:e}),t},catch:function(e){return h.push({type:"c",next:e}),t}};return t},on:function(){c.push(arguments)},render:function(){a=arguments},destroy:function(){p=arguments}},o.__onWebMessengerHostReady__=function(e){if(delete o.__onWebMessengerHostReady__,o[s]=e,i)for(var t=e.init.apply(e,i),n=0;n<h.length;n++){var r=h[n];t="t"===r.type?t.then(r.next):t.catch(r.next)}a&&e.render.apply(e,a),p&&e.destroy.apply(e,p);for(n=0;n<c.length;n++)e.on.apply(e,c[n])};var n=new XMLHttpRequest;n.addEventListener("load",t),n.open("GET","https://"+e+".webloader.smooch.io/",!0),n.responseType="json",n.send()}(window,document,"Smooch",{{integration-id}},"5");
</script>
</head>
<body>
Testing Smooch Web SDK
<script>
Smooch.init({ integrationId: {{integration-id}}).then(function (data) {
// Your code after init is complete
console.log(data)
});
</script>
</body>
</html>2. Integration steps:
- The customer will follow the above steps to load Sunshine’s Web-SDK.
- For the messages sent from Sunshine’s Web SDK to show up on Kommunicate, the Customer will need to integrate Kommunicate with Sunshine in the Dashboard.
- After this, messages from Sunshine Conversation will be visible in Kommunicate.
As you can see, it is simple and easy to integrate Kommunicate with your Sunshine Conversations application. Do let us know if you want to learn more about the Sunshine Conversations integration.
