Getting Started
Installation
Learn how to add Tolki Chat to your website.
Script Tag
The simplest way to add Tolki Chat to any website. Just add the script tag before the closing </body> tag.
<script src="https://embed.tolki.ai/chat.js" defer></script>
Then place the <tolki-chat> component anywhere in your page:
<tolki-chat bot="YOUR-BOT-UUID"></tolki-chat>
Replace
YOUR-BOT-UUID with the UUID provided in your Tolki dashboard.Full Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<!-- Tolki Chat Widget -->
<script src="https://embed.tolki.ai/chat.js" defer></script>
<tolki-chat
bot="YOUR-BOT-UUID"
position="right"
theme="auto"
lang="en"
></tolki-chat>
</body>
</html>
WordPress
Paste the following snippet in your theme's footer.php or use a plugin like Insert Headers and Footers:
<script src="https://embed.tolki.ai/chat.js" defer></script>
<tolki-chat bot="YOUR-BOT-UUID"></tolki-chat>
Shopify
Go to Online Store > Themes > Edit code and add the snippet before </body> in theme.liquid:
<script src="https://embed.tolki.ai/chat.js" defer></script>
<tolki-chat bot="YOUR-BOT-UUID"></tolki-chat>
Single Page Applications
Since <tolki-chat> is a standard web component, it works in any SPA framework. Just add it to your root template or layout.
React
function App() {
return (
<div>
<h1>My App</h1>
<tolki-chat bot="YOUR-BOT-UUID" />
</div>
)
}
Vue
<template>
<div>
<h1>My App</h1>
<tolki-chat bot="YOUR-BOT-UUID" />
</div>
</template>
Angular
Add CUSTOM_ELEMENTS_SCHEMA to your module, then use the tag directly:
<tolki-chat bot="YOUR-BOT-UUID"></tolki-chat>