Install the chat widget on your website
Installing the Zaapi Chat Widget on Your Website
This guide provides detailed instructions on how to add the Zaapi Chat Widget to your website. After you have configured your widget's appearance and content, you need to embed its unique code snippet into your site's HTML.
First, Get Your Code Snippet
Before you begin, you need your unique code snippet.
In your Zaapi account, navigate to Settings > Integrations.
Select your configured Chat Widget.
Go to the Install tab.
Click the Copy code button to copy the entire snippet to your clipboard.
Now, follow the instructions below for your specific website platform.
For a Custom HTML Website
If your website is built with standard HTML, you will need to edit your site's source files directly. You should send the code snippet to your developer and he/she will be able to do this for you within a few minutes.
Open your website's files in a code editor (like VS Code, Sublime Text, or Notepad++).
Identify the main template file that is used on every page of your site. This is often
index.htmlor a shared footer file (e.g.,footer.html).In that file, scroll to the very bottom and locate the closing
</body>tag.Paste your Zaapi code snippet on a new line just before the
</body>tag.Save your changes and upload the updated file to your web server. The widget should now appear on your site.
For Shopify
You can easily add the Zaapi Chat Widget to your Shopify store using Shopify’s App Embed feature. This allows you to display the widget on your storefront so customers can start chatting with you directly.
Open Shopify Admin Go to your Shopify admin panel and navigate to Online Store → Themes.
Click Customize Find the theme currently live on your store and click Customize.
Go to App Embeds In the editor, click the App Embeds icon (⚙️) on the left-hand sidebar.
Copy your Widget ID from Zaapi After creating your widget in Zaapi, click on the Install tab, and copy the widget ID
Paste the widget ID in Shopify to enable
Find Zaapi Chat Widget in the list.
Paste the widget ID into the Widget ID field
Toggle the switch ON to activate it on your store.
Adjust Widget Settings (Optional) You can customize your widget’s colors, position, and callout message directly in Zaapi. To do this:
Go to app.zaapi.com on a computer, then Settings → Integrations → Website Widget.
Edit your widget’s appearance or settings.
Changes will update automatically on your Shopify store.
Save Your Theme Click Save in the top right corner to apply your changes.
Preview Your Store Visit your store’s front end — you should now see the Zaapi Chat Widget in the corner of your website.
For WordPress
The safest and most recommended method for WordPress is to use a plugin to add code snippets. This ensures your widget code isn't removed when you update your theme.
We recommend using the popular "WPCode – Insert Headers and Footers" plugin.
From your WordPress Admin dashboard, navigate to Plugins > Add New.
In the search bar, type "WPCode" and press Enter.
Find the "WPCode – Insert Headers and Footers" plugin, then click Install Now and Activate.
Once activated, a new "Code Snippets" item will appear in your left-hand menu. Hover over it and click on Header & Footer.
Scroll down to the Footer section.
Paste your Zaapi code snippet into the text box under "Footer".
Click the Save Changes button. The widget will now appear on your entire WordPress site.
For Webflow
Webflow provides a dedicated section in the site settings for adding custom code to your site's footer.
In your Webflow Designer, click the "W" menu icon in the top-left corner and select Site settings.
Navigate to the Custom Code tab in the top menu.
Scroll down to the Footer Code section.
Paste your Zaapi code snippet into the text box that says "Add code before the closing </body> tag".
Click the Save Changes button.
Finally, Publish your site to make the changes live. The chat widget will now be visible on your published Webflow site.
Last updated
Was this helpful?