Before you start
Live chat is the small window visitors use to write to you without leaving your site. In Miko, every message sent there lands in the same inbox as email and WhatsApp, and if Miko AI is on, it gives the first answer.
All you need is the ability to add one line to your site's HTML. WordPress, Shopify or a site you built yourself, it makes no difference.
1. Get the install code
- In the Miko panel, open Settings › Channels › Web chat › Install.
- The code comes filled in with your workspace key; copy it.
- Paste it right before the closing </body> tag on every page where the chat should appear.
<script src="https://getmiko.co/widget.js" data-key="YOUR_WORKSPACE_KEY" async></script>In a single-page app (React, Vue and the like) you can load the same script from code when the app starts; the docs show how.
2. Change the look in the panel, not in the code
Once the code is in, colours, the greeting, the cards on the chat's home and the help article search are set in Messenger Studio. The chat on your site changes the moment you save; there is nothing to redeploy.
- Brand colour and logo: the chat header carries your brand.
- Greeting: a short invitation beside the launcher, at the moment and frequency you choose.
- Spotlight: the same help can also sit at the foot of the page as a search bar.
3. Keep the chat to your own sites
List your domains under allowed sites in the web chat settings and the chat opens only there. With the list empty it opens wherever the code is added, so we suggest filling it in before you go live.
4. Recognise signed-in customers
If a visitor is signed in on your site, pass who they are before the code. Their conversations then follow them from device to device and land on the same contact, so your agent knows who they are talking to.
To stop anyone pretending to be someone else, a userHash is required: the HMAC-SHA256 of the user's ID, taken with the secret under Settings › Channels › Web chat › Security. Compute it on your own server and never put the secret on the page.
<script>
window.mikoSettings = {
userId: "u_123",
userHash: "<computed on your server>",
email: "[email protected]",
name: "Ada Lovelace"
};
</script>5. Open it from your own button (optional)
To open the chat from your own “Contact us” button instead of the corner launcher, the page can drive it with window.Miko: Miko("open") opens it and Miko("hide") removes the corner button.
What's next
With the chat on your site, feed Miko AI: once you connect a knowledge source it starts answering your customers' common questions from what you've written, and hands the conversation to your team when it isn't sure.