Widget Installation

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

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

<script
  src="https://widget.chatmefy.com/loader.js"
  data-bot-id="YOUR_BOT_ID"
  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.tsxtsx

'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://widget.chatmefy.com/loader.js';
    script.async = true;
    script.setAttribute('data-bot-id', botId);

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

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

<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://widget.chatmefy.com/loader.js';
  script.async = true;
  script.setAttribute('data-bot-id', botId);

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

function add_chatmefy_widget() {
    ?>
    <script
        src="https://widget.chatmefy.com/loader.js"
        data-bot-id="YOUR_BOT_ID"
        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

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

Google Tag Manager

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

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

Configuration Options

Customize the widget behavior using data attributes:

Attribute	Description	Default
`data-bot-id`	Your bot ID (required)	-
`data-position`	Widget position: "right" or "left"	"right"
`data-offset-x`	Horizontal offset in pixels	20
`data-offset-y`	Vertical offset in pixels	20
`data-auto-open`	Auto-open after delay (ms)	disabled
`data-hide-on-mobile`	Hide widget on mobile devices	false

Example with optionshtml

<script
  src="https://widget.chatmefy.com/loader.js"
  data-bot-id="YOUR_BOT_ID"
  data-position="left"
  data-offset-y="40"
  data-auto-open="5000"
  async
></script>

Next Steps

Customize Appearance Add Knowledge Base