Documentation: Widget installation
Widget installation
Updated September 7, 2026
The widget is installed with a single script tag on every page before the closing </body>. The script is asynchronous — it does not block page loading and weighs under 30 KB.
<script src="https://cdn.chatva.app/widget.js" …>Installation code
Before </body>
<script src="https://cdn.chatva.app/widget.js" data-project="ch_live_9f3ka2" data-theme="system" defer></script>The key on this page is a demo key. Find your personal code in the dashboard: Widget → “Install” tab.
Platform guides
| Platform | Where to paste |
|---|---|
| Tilda | Site settings → “More” → “HTML code for BODY area” before </body>, then republish all pages |
| WordPress | The “Insert Headers and Footers” plugin → Scripts in Footer field. Or Appearance → Theme file editor → footer.php before </body> |
| 1C-Bitrix | Settings → Site management → Templates → open the site template and paste the code before </body> |
| InSales | Design theme → Code editor → layouts/layout.liquid → paste before </body> and save |
| Custom site | The shared page template or index.html — the code must be on every page. In React and Vue this is the root layout |
Script parameters
| Parameter | Description |
|---|---|
| data-project | Your project key from the dashboard (required) |
| data-theme | Widget theme: system (default), light or dark. Overrides the dashboard setting only for this installation. |
| data-accent | Widget accent color, hex (#a3e635) |
| data-position | Button position: right or left |
| data-greeting | Greeting in the chat header |
| data-lang | Widget UI language: ru or en |
| data-collect | Contact fields: name,phone,email |
Example: always use the dark theme
<script src="https://cdn.chatva.app/widget.js" data-project="ch_live_9f3ka2" data-theme="dark" defer></script>Checking the installation
- 1
Open your site in a new tab
The chat button should appear in the bottom corner. If not, hard-refresh (Cmd+Shift+R).
- 2
Send a test message
It should appear in the dashboard inbox instantly.
- 3
Click “Check installation”
The “Install” tab has an automatic check that detects the script on your site.
If the widget does not appear, make sure the code is right before </body> and not in <head>, and that the site has no aggressive script blockers (e.g. a strict CSP).