Skip to main content

Widget Installation Guide

Add TapToChat to your website in minutes. No coding experience required.

Quick Start

3 Simple Steps:

  1. 1

    Sign up and create a widget

    Get your unique widget ID from your dashboard

  2. 2

    Copy your installation code

    Choose from HTML, React, Next.js, or WordPress

  3. 3

    Paste before </body>

    Add the code to your website and you're done!

Installation Methods

HTML / Static Sites

For static websites, plain HTML, or any site where you can add scripts.

<!-- TapToChat Widget -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['TapToChat']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'taptochat', 'https://taptochat.io/widget/embed.js'));
  taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
</script>
<!-- End TapToChat Widget -->

React

For React applications (Create React App, Vite, etc.).

// Add to your App.js or main component
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://taptochat.io/widget/embed.js';
    script.async = true;
    script.id = 'taptochat';
    document.body.appendChild(script);

    script.onload = () => {
      if (window.TapToChat) {
        window.TapToChat('init', {
          widgetId: 'YOUR_WIDGET_ID'
        });
      }
    };

    return () => {
      const scriptEl = document.getElementById('taptochat');
      if (scriptEl) scriptEl.remove();
      const widgetEl = document.getElementById('taptochat-widget');
      if (widgetEl) widgetEl.remove();
    };
  }, []);

  return <div className="App">{/* Your app */}</div>;
}

Next.js

For Next.js 13+ with App Router.

// Create app/components/TapToChatWidget.tsx
'use client'

import { useEffect } from 'react'

export function TapToChatWidget() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://taptochat.io/widget/embed.js'
    script.async = true
    script.id = 'taptochat'
    document.body.appendChild(script)

    script.onload = () => {
      if (window.TapToChat) {
        window.TapToChat('init', {
          widgetId: 'YOUR_WIDGET_ID'
        })
      }
    }

    return () => {
      const scriptEl = document.getElementById('taptochat')
      if (scriptEl) scriptEl.remove()
      const widgetEl = document.getElementById('taptochat-widget')
      if (widgetEl) widgetEl.remove()
    }
  }, [])

  return null
}

// Then in your app/layout.tsx:
import { TapToChatWidget } from './components/TapToChatWidget'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <TapToChatWidget />
      </body>
    </html>
  )
}

WordPress

For WordPress sites. Add to functions.php or use a plugin like “Insert Headers and Footers”.

// Add to functions.php
function taptochat_widget() {
  ?>
  <!-- TapToChat Widget -->
  <script>
    (function(w,d,s,o,f,js,fjs){
      w['TapToChat']=o;w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'taptochat', 'https://taptochat.io/widget/embed.js'));
    taptochat('init', { widgetId: 'YOUR_WIDGET_ID' });
  </script>
  <?php
}
add_action('wp_footer', 'taptochat_widget');

Configuration Options

Customize your widget by passing additional options to the init function:

TapToChat('init', {
  widgetId: 'YOUR_WIDGET_ID',  // Required
  position: 'bottom-right',     // Optional: 'bottom-right' or 'bottom-left'
  color: '#3B82F6'              // Optional: Any hex color code
});
OptionTypeDescription
widgetIdstringYour unique widget ID (required)
positionstringWidget position: 'bottom-right' or 'bottom-left'
colorstringPrimary color in hex format (e.g., '#3B82F6')

Best Practices

Place before </body>

Add the script just before the closing body tag for optimal performance and to ensure the DOM is loaded.

Asynchronous Loading

The widget loads asynchronously and won't block your page from rendering or slow down your site.

Test in Staging First

Test the widget in a development or staging environment before deploying to production.

Keep Widget Active

Make sure your widget is set to “Active” in your dashboard settings for it to appear on your site.

Troubleshooting

Widget not appearing?

  • •Check that your widget is set to “Active” in the dashboard
  • •Verify the widget ID in your code matches the one in your dashboard
  • •Clear your browser cache and hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
  • •Check browser console for JavaScript errors

Still having issues?

Contact our support team at support@taptochat.io or use the chat widget on this page.

Ready to get started?

Create your free account and add live chat to your website in minutes.

Start Free TrialSee Demo