How to Install Chatim Widget

The Chatim widget allows you to integrate live chat and chatbot features directly into your website. Installing it takes just one step: copy a small JavaScript snippet and paste it into your site's HTML. The widget loads asynchronously and won't slow down your pages.

Step 1: Sign Up and Log In

Go to Sign up and create a new account, or sign in if you already have one.
Once logged in, create your first project. After creating the project, click Install in the navigation menu to find your installation code.

Step 2: Get the Installation Code

The Install page displays a ready-to-use code snippet with your project ID pre-filled. Click Copy Code to copy it to your clipboard.

The code looks like this:

<script>
  window.chatim = window.chatim || {};
  window.chatim.cmd = window.chatim.cmd || [];
  window.chatim.settings = { projectId: "YOUR_PROJECT_ID" };
</script>
<script src="https://widget.chatim.app/widget.js" async></script>

Step 3: Add the Code to Your Website

Add this code to every page where you want the chat widget to appear. For best results, place it just before the closing </body> tag:

  <!-- Your page content -->

  <!-- Chatim Widget -->
  <script>
    window.chatim = window.chatim || {};
    window.chatim.cmd = window.chatim.cmd || [];
    window.chatim.settings = { projectId: "YOUR_PROJECT_ID" };
  </script>
  <script src="https://widget.chatim.app/widget.js" async></script>
</body>
</html>

How It Works

The first <script> block initializes Chatim settings with your project ID
The second <script> loads the widget asynchronously (won't block page loading)
Once loaded, the chat widget appears in the corner of your page
Visitors can click to open the widget and interact with your chatbot

Step 4: Test the Widget

Open your website in a browser and refresh the page to ensure the Chatim widget appears.
Click it to open the widget and test both live chat and chatbot functionalities.
Check the Visitors page in your dashboard - you should see your visit.

Platform-Specific Guides

Website Builders

WordPress - Add via theme editor, plugin, or functions.php
Shopify - Add to your theme's theme.liquid file
WIX - Add custom code through WIX site settings
Squarespace - Inject code via Code Injection settings
Webflow - Add via Project Settings custom code section
Magento - Add to your theme's layout XML or CMS settings
Site123 - Add via custom code settings

Tag Managers

Google Tag Manager - Create a custom HTML tag with the widget code
Adobe Launch - Add as a custom code action in a rule

JavaScript Frameworks

Next.js - Use the next/script component with lazyOnload strategy

Troubleshooting

Widget Not Appearing

Check the code placement - ensure it's before </body>, not inside <head>
Verify the project ID - compare it with the ID shown on your Install page
Check browser console - open DevTools (F12) and look for errors in the Console tab
Disable ad blockers - some ad blockers may prevent the widget from loading
Clear cache - try a hard refresh (Ctrl+F5 or Cmd+Shift+R)

Multiple Widgets Appearing

If you see duplicate widgets, the code may be added more than once. Check theme files for duplicate entries, tag manager for duplicate tags, and plugin settings that may also inject the widget.

Need Help?

If you run into any issues, contact Chatim support team.