Web2Chat Help center
All Collections
Getting Started
Install Web2Chat for Users on the Web
Install Web2Chat for Users on the Web

Install the Web2Chat widget and start having conversations with your users.

Avatar of Khushhal
Written by Khushhal
Last updated Jan 29, 2025
Web2Chat makes it easy to integrate live chat into your website, allowing you to engage visitors and provide seamless support. Follow this guide to install Web2Chat on your website and start interacting with your users in real-time.

Step 1: Copy Your Web2Chat Installation Code

  1. Log in to your Web2Chat Dashboard.
  2. Navigate to Settings > Installation.
  3. Locate the JavaScript Snippet under the "Web Installation" section.
  4. Click Copy Code to copy the snippet.
Image

Step 2: Add Web2Chat to Your Website

For HTML Websites

  1. Open your website’s HTML files.
  2. Paste the copied code right before the closing </body> tag on every page where you want Web2Chat to appear.
  3. Save the changes and refresh your website to see Web2Chat live.

For CMS Platforms (WordPress, Shopify, etc.)

  • WordPress: Add the snippet inside your theme’s footer (footer.php) or use a header/footer plugin.
  • Shopify: Go to Online Store > Themes > Edit Code, then paste the snippet inside the theme.liquid file before </body>.
  • Other CMS: Use the platform’s custom script integration feature to insert the Web2Chat snippet.

Step 3: Verify Your Installation

  1. Open your website in a browser.
  2. Check for the Web2Chat Messenger icon in the bottom corner of the page.
  3. If the Messenger does not appear:
    • Ensure the snippet is placed correctly.
    • Clear your website’s cache and refresh the page.
    • Check for any conflicting JavaScript errors in your browser console.

Ask Your Developer to Help (Optional)

If needed, you can ask a teammate (like an engineer) to complete the installation.
  1. Click Invite Teammate in the Web2Chat dashboard.
  2. Enter their email address, and they will receive an invite to join your team's workspace.
  3. Once they accept the invite, they can assist with the installation process.
Image

Customize Web2Chat (Optional)

After installation, personalize Web2Chat to match your brand:
  • Customize the Messenger Appearance: Go to Settings > Messenger > Customization to change colors, position, and welcome messages.
  • Set Up Automated Messages: Create proactive greetings or targeted messages based on user behavior.
  • Integrate with Other Tools: Connect Web2Chat with your CRM, email marketing, or analytics platforms.
How to Customize Web2Chat Messenger

Installing Web2Chat for a Client

If you don't have access to the Web2Chat workspace, you can grab the JavaScript code here. You will need to manually replace WORKSPACE_ID with the unique workspace ID for your Web2Chat account.
 <script>
        !function(){var t=window;if("function"==typeof t.Chat);else{var e=document,a=function(){a.c(arguments)};a.q=[],a.c=function(t){a.q.push(t)},t.Chat=a;var n=function(){var t=e.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://widget.web2chat.ai/widget/WORKSPACE_ID";var a=e.getElementsByTagName("script")[0];a.parentNode.insertBefore(t,a)};"complete"===document.readyState?n():t.attachEvent?t.attachEvent("onload",n):t.addEventListener("load",n,!1)}}();
      </script>

      <script>        
        window.Chat("boot", {
          app_id: "WORKSPACE_ID",
          name: user.name, // Full name
          email: user.email, // the email for your user
        });
      </script>
If you need further assistance, contact our Customer Support.

Related Articles