How can I embed Spoki, so the WhatsApp Chat in the contact detail page of my software?
How can I let my clients to request a WhatsApp template directly form my management software?
Solve these needs, and more, by embedding Spoki into your own software!
Functionalities #
Here’s what you can embed Spoki with the iframe:
- Iframe embedding. Allow your customers to use Spoki features without leaving your management system.
- Auto-login via token. No need to provide Spoki credentials to your users, you can authenticate the associated service user before showing them the iframe.
- Hide Spoki branding. The Spoki logo is not visible in the iframe.
- Multi-Session. Simultaneously use Spoki in different tabs with different sessions.
- Prevent navigation. In iframe the navigation bar is not visible, in this way you can limit the usage to a specific page.
How To #
To embed the Spoki iframe you need to perform the following steps:
- Request the Api Key
- Generate the Private Token
- Embed the iframe
- Obtain the Api Key Approval, then enjoy 🎉
1. Request the Api Key #
- Go to Integrations / API / Request Api Key
- Insert the motivation and click on “Request Api Key”
Eg. “I want to develop the Spoki integration within my management system so as to be able to embed a chat iframe in the detail of a contact.”
- Save the generated Api Key. You will not be able to use the API until it is approved, you will receive an email regarding the outcome of the request within a maximum of 48h.
2. Generate the Private Token #
The Private Token is associated to a specific user of your account.
You can obtain a Private Token for:
- Service User – recommended
- Your own user
- Asking to other users to login and give it to you – not recommended, use Service Users instead
To obtain the Private Token follow these steps:
- Go to Users & Roles / Add
- Select the role, select “Service user” as user type, insert the name, then click “Add“
- Click on the key icon on the right of the service user
- Click on “Generate new Private Key“
- Save the email and the Private Key.
IMPORTANT: Make sure to save it, you won’t be able to access it again. Keep the key protected, anyone who has it can act for you. If so, regenerate the key.
3. Embed the iframe #
ATTENTION: you will not be authorized to use this API until you have an Approved API Key!
Yes, I know you’ve been itching to do this… it’s time to code! 👨💻
Here’s how it works:
- In your HTML page insert an empty div for the Spoki embedding
<body>
...
<div id="spoki-embedding"></div>- Insert the css style in the head
...
<style>
#spoki-embedding iframe {
position: fixed;
bottom: 10px;
right: 10px;
height: 600px;
width: 450px;
border: 2px solid #cccccc;
border-radius: 8px;
}
</style>
</head>- Before the end of the body insert this script that allows you to make the auth using the Api Key and Private Key, then it will insert the iframe inside the div. The user will be auto-logged in and will go to the page slug specified.
...
<script type="application/javascript">
function initSpokiIframe() {
const headers = new Headers();
headers.append("Content-Type", "application/json");
headers.append("X-Spoki-Api-Key", "{{Api-Key}}");
const body = JSON.stringify({
email: "{{Email}}",
private_key: "{{Private-Key}}"
});
const requestOptions = {
method: "POST",
headers,
body,
redirect: "follow"
};
fetch("https://app.spoki.it/api/1/auth/get_authentication_token/", requestOptions)
.then(response => response.json())
.then(result => {
console.log(result);
const pageSlug = "chats";
const iframeParent = document.getElementById("spoki-embedding");
const iframeEl = document.createElement("iframe");
iframeEl.setAttribute("frameborder", "0");
iframeEl.setAttribute("src", `https://spoki.app/${pageSlug}?auth_token=${result.token}&auth_uid=${result.uid}`);
iframeParent.appendChild(iframeEl);
})
.catch(error => console.log("error", error));
}
// call on startup
(initSpokiIframe)();
</script>
</body>- You can set as page slug all the Spoki routes you want, the most important are:
- Chat list: “chats“
- Chat detail: “chats/:uuid” (you can get the chat_link using the Contacts Api). Concatenate to the src url “&can_view_chat_list=true” to hide the back button so the client can’t access to the chats page.
- Templates: “templates“
Want to know more about the Get Authentication Token Api? Check the Api Documentation
Download the Demo File #
4. Obtain the Api Key Approval, then enjoy 🎉 #
Well done! Everything is ready to let your clients use Spoki from your own web software.
You just have to wait for the Api Key approval.
Thank you for your time.
Enjoy Spoki 🎉
