Widget Installation
Copy your widget snippet and paste it into your website
Installing the widget means pasting one <script> tag into your website. No other setup is needed.
Step 1: Copy your snippet
Go to Settings → Widget and click Copy on the code card. The snippet already contains your clinic ID.
It looks like this:
<script
src="https://docistra.com/widget/embed.js"
data-clinic-id="YOUR_CLINIC_ID"
data-lang="ar"
async
></script>Always copy the snippet from your dashboard rather than typing it, so the clinic ID is exactly right.
| Attribute | What it does |
|---|---|
data-clinic-id | Links the widget to your clinic. Required. |
data-lang | ar for an Arabic widget (button on the left), en for English (button on the right). The snippet uses the language your dashboard was in when you copied it. |
Your clinic ID is safe to put in public website code. It only lets visitors chat with your AI, not access your dashboard.
Step 2: Paste it before </body>
Use a plugin like WPCode or Insert Headers and Footers and paste the snippet in the footer section. Or add it to your theme's footer.php just before </body>.
- Go to Online Store → Themes → Edit code
- Open
layout/theme.liquid - Paste the snippet just before
</body>and save
Paste the snippet just before the closing </body> tag on every page where you want the widget.
Step 3: Check it works
Open your website. You should see the chat button in the bottom corner. Click it and ask a question, then check that the chat appears in Conversations.
Troubleshooting
- Make sure the snippet is before
</body>and was published - Make sure
data-clinic-idwasn't changed - Try a private/incognito window to skip the browser cache
- Check your plan: the widget doesn't answer on Solo plans
- Check that your subscription is active
- Complete your clinic profile (name, public URL, logo, description, phone and at least one address). The AI waits until these are filled in.
Remove the other chat tool, or switch data-lang so the Docistra button sits on the other side.