TryVarta Documentation
Install the chatbot on your website
This guide shows the exact code to copy, where to place it, and how to verify your TryVarta chatbot is working.
1. Copy this script
Replace
YOUR_CHATBOT_ID with the chatbot id from your Integration page.HTML Snippet
<script
src="https://www.tryvarta.com/widget.js"
data-bot-id="YOUR_CHATBOT_ID"
defer
></script>Paste this just before the closing
</body> tag of your website.Quick checklist
Open the Integration page inside TryVarta.
Copy the generated script code.
Paste it before </body> on your site.
Deploy your website changes.
Open the live site and test the widget.
2. Example for a normal HTML page
If your website has an
index.html file, this is the simplest setup.index.html
<!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>
<p>This is my homepage.</p>
<script
src="https://www.tryvarta.com/widget.js"
data-bot-id="YOUR_CHATBOT_ID"
defer
></script>
</body>
</html>3. Next.js example
Add the widget script in your root layout using Next.js
Script.app/layout.tsx
import Script from "next/script";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://www.tryvarta.com/widget.js"
data-bot-id="YOUR_CHATBOT_ID"
strategy="afterInteractive"
/>
</body>
</html>
);
}4. React / Vite example
Paste the script into your main
index.html file.index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script
src="https://www.tryvarta.com/widget.js"
data-bot-id="YOUR_CHATBOT_ID"
defer
></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>5. How to verify it works
After deploying your website:
- Open your live website.
- Look for the chatbot widget in the bottom-right corner.
- Send a test message.
- Confirm the bot replies correctly.
Common mistakes
The chatbot id is wrong or missing.
The script was pasted into the site but the site was not redeployed.
The script was added to the wrong file instead of the main page layout or footer.
The bot has no knowledge trained yet.
The owner trial has ended or the plan is inactive.
A browser extension is blocking scripts.