chatmefy

Docs

Widget Installation

Learn how to install the Chatmefy chat widget on your website using different methods.

On This Page

  • Basic Installation (HTML)
  • React / Next.js
  • Vue.js
  • WordPress
  • Shopify
  • Google Tag Manager

Basic Installation (HTML)

The simplest way to install Chatmefy is by adding a script tag to your HTML. Add this code just before the closing </body> tag:

index.html

<script src="https://www.chatmefy.com/api/widget/YOUR_BOT_ID/loader.js" async></script>

Replace YOUR_BOT_ID with your actual bot ID. Find it in your dashboard under Bot Settings → Installation.

React / Next.js

For React applications, create a component that loads the widget:

ChatWidget.tsx

'use client';

import { useEffect } from 'react';

export function ChatWidget({ botId }: { botId: string }) {
  useEffect(() => {
    // Check if script already exists
    if (document.getElementById('chatmefy-widget')) return;

    const script = document.createElement('script');
    script.id = 'chatmefy-widget';
    script.src = `https://www.chatmefy.com/api/widget/${botId}/loader.js`;
    script.async = true;

    document.body.appendChild(script);

    return () => {
      // Cleanup on unmount
      const existing = document.getElementById('chatmefy-widget');
      if (existing) existing.remove();
    };
  }, [botId]);

  return null;
}

Then use it in your layout or page:

layout.tsx

import { ChatWidget } from '@/components/ChatWidget';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ChatWidget botId="YOUR_BOT_ID" />
      </body>
    </html>
  );
}

Vue.js

For Vue applications, create a composable or add the script in your App.vue:

App.vue

<script setup>
import { onMounted, onUnmounted } from 'vue';

const botId = 'YOUR_BOT_ID';

onMounted(() => {
  if (document.getElementById('chatmefy-widget')) return;

  const script = document.createElement('script');
  script.id = 'chatmefy-widget';
  script.src = `https://www.chatmefy.com/api/widget/${botId}/loader.js`;
  script.async = true;

  document.body.appendChild(script);
});

onUnmounted(() => {
  const script = document.getElementById('chatmefy-widget');
  if (script) script.remove();
});
</script>

WordPress

For WordPress, add the script via your theme's functions.php or use a plugin:

Option 1: Functions.php

functions.php

function add_chatmefy_widget() {
    ?>
    <script src="https://www.chatmefy.com/api/widget/YOUR_BOT_ID/loader.js" async></script>
    <?php
}
add_action('wp_footer', 'add_chatmefy_widget');

Option 2: Plugin (Header/Footer Scripts)

Use a plugin like "Insert Headers and Footers" or "WPCode" and paste the script in the footer section.

Shopify

  1. 1 Go to Online Store → Themes → Edit Code
  2. 2 Open theme.liquid in the Layout folder
  3. 3 Paste the script code just before </body>
  4. 4 Click Save

Google Tag Manager

  1. 1 Create a new Custom HTML tag
  2. 2 Paste the widget script code
  3. 3 Set trigger to All Pages - DOM Ready
  4. 4 Submit and publish

Using GTM may slightly delay widget loading. For optimal performance, we recommend direct installation when possible.

Next Steps