Open AppContact Support

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.

  1. In your Zaapi account, navigate to Settings > Integrations.

  2. Select your configured Chat Widget.

  3. Go to the Install tab.

  4. 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.

  1. Open your website's files in a code editor (like VS Code, Sublime Text, or Notepad++).

  2. Identify the main template file that is used on every page of your site. This is often index.html or a shared footer file (e.g., footer.html).

  3. In that file, scroll to the very bottom and locate the closing </body> tag.

  4. Paste your Zaapi code snippet on a new line just before the </body> tag.

  5. 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 widget to every page of your Shopify store by editing your theme's main layout file.

  1. From your Shopify Admin dashboard, go to Online Store > Themes.

  2. Find the theme you want to edit, click the "..." button (Actions), and select Edit code from the dropdown menu.

  3. In the file explorer on the left, look for the Layout section and click on the file named {/} theme.liquid.

  4. In the code editor, scroll to the bottom of the file and locate the closing </body> tag.

  5. Paste your Zaapi code snippet on a new line just before the </body> tag.

  6. Click the Save button in the top right corner. The widget will now be active on your storefront.

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.

  1. From your WordPress Admin dashboard, navigate to Plugins > Add New.

  2. In the search bar, type "WPCode" and press Enter.

  3. Find the "WPCode – Insert Headers and Footers" plugin, then click Install Now and Activate.

  4. Once activated, a new "Code Snippets" item will appear in your left-hand menu. Hover over it and click on Header & Footer.

  5. Scroll down to the Footer section.

  6. Paste your Zaapi code snippet into the text box under "Footer".

  7. 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.

  1. In your Webflow Designer, click the "W" menu icon in the top-left corner and select Site settings.

  2. Navigate to the Custom Code tab in the top menu.

  3. Scroll down to the Footer Code section.

  4. Paste your Zaapi code snippet into the text box that says "Add code before the closing </body> tag".

  5. Click the Save Changes button.

  6. Finally, Publish your site to make the changes live. The chat widget will now be visible on your published Webflow site.

PreviousConfigure the chat widgetNextSearch

Last updated

Was this helpful?