Sunshine Integration
Sunshine Integration
With Sunshine integration to Kommunicate, you can seamlessly incorporate Kommunicate's advanced GenAI chatbots into Zendesk's chat widget and, agents can efficiently manage assigned chats directly from the Zendesk dashboard.
Follow these steps to integrate Sunshine with the Kommunicate:
- Login to Zendesk -> Go to Admin Center -> Apps and Integrations -> Conversation Api -> Create Api Key-> Give a name to your Key and click on Next.
Copy the Information displayed on the following sheet as you cannot access it later.
- Login to Kommunicate -> Go to Integrations -> Sunshine Conversation -> Fill the Details.
- We require Sunshine's chat SDK to send messages to Kommunicate. To proceed, we need to create a web integration with Sunshine. Below is the API documentation for reference.
3.1.Combine your api_id
and api_secret_key
with a colon (:) in between. Then, encode the combined string using an encoding tool (Base64, for example).
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" }'
3.2 Replace sunshineAppId
and the resulting value in place of Base64(api_id:api_secret_key)
Step 3 value in the above screenshot in the provided cURL command.
3.3 Copy this cURL & import it into Postman, then click on Send to retrieve the integration ID.
Note the integration ID here to use in the below script.
- Use the following script in the Head tag.
<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>
Use the following script inside the body tag.
<script>
Smooch.init({
integrationId: "integration-id", // Add the integration id here
canUserSeeConversationList: false,
businessName: 'Kommunicate',
businessIconUrl: 'https://static.zdassets.com/sunco-accounts/sunco-dashboard/v19/43f8f7a97a52a609c850cdbdfac3107a.svg',
}).then(function (data) {
Smooch.createConversation({
metadata: {
isFirstTimeCustomer: true,
},
}).then((conversation) => {
console.log("Hello Sunshine");
});
});
</script>
The following is an example of how to add the script.
Replace integration-id with the integration-id that you got from step 3.1.
- To handover the conversation to the Zendesk agent, add the handover action in the Default Fallback section as shown below:
The following is what the chat widget looks like.
- To modify the bot's name, adjust the "businessName" field, and to alter the icon, update the "businessIconUrl" accordingly.
businessName: 'Kommunicate',
businessIconUrl: 'https://static.zdassets.com/sunco-accounts/sunco-dashboard/v19/43f8f7a97a52a609c850cdbdfac3107a.svg',