Widget installation
Updated October 11, 2026
On this page
Copy your workspace’s code from Widget → Install and add it to the shared site template before the closing </body>. After publishing, check the chat button, an incoming message and a reply.
<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>Copy your own code and check the site connection. Chatva interface in Russian, demo data.
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-site-key | Alternative project key attribute. Use the attribute supplied in your installation code. |
Configure appearance, button placement, greeting and contact collection in the dashboard’s Widget section. The loader does not process separate data-accent, data-position, data-greeting, data-lang or data-collect attributes.
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
Open your site in a new tab
The chat button should appear in the bottom corner. If not, hard-refresh (Cmd+Shift+R).
Send a test message
Find it in the correct workspace’s inbox and reply. Confirm the reply appears in the widget.
Click “Check connection”
On the Install tab, Chatva checks for its widget on the specified site. Publish your website changes first.