Custom Website Integration

Learn how to integrate Chatplugify with any custom website using HTML, React, or advanced configuration options.

Custom Website Integration Tutorial

Coming Soon - Complete custom integration guide

HTML Integration

Basic HTML Setup

<!-- Add this before closing </body> tag -->
<script>
  window.chatplugifySettings = {
    apiKey: "YOUR_API_KEY_HERE",
    position: "bottom-right",
    primaryColor: "#005B63",
    accentColor: "#F45500",
    welcomeMessage: "Hello! How can we help you today?",
    showOnMobile: true,
    autoOpen: false,
    showOnPages: ["*"], // Show on all pages
    hideOnPages: [], // Hide on specific pages
    businessHours: {
      enabled: true,
      timezone: "America/New_York",
      schedule: {
        monday: { open: "09:00", close: "17:00" },
        tuesday: { open: "09:00", close: "17:00" },
        wednesday: { open: "09:00", close: "17:00" },
        thursday: { open: "09:00", close: "17:00" },
        friday: { open: "09:00", close: "17:00" },
        saturday: { closed: true },
        sunday: { closed: true }
      }
    }
  };
</script>
<script src="https://cdn.chatplugify.com/widget.js" async></script>

Installation Steps:

1. Replace "YOUR_API_KEY_HERE" with your actual API key
2. Customize the settings to match your preferences
3. Add the code before the closing </body> tag
4. Test the integration on your website

React Integration

Component Installation

npm install

npm install @chatplugify/react

App.jsx

import { ChatplugifyWidget } from '@chatplugify/react';

function App() {
  return (
    <div className="App">
      <ChatplugifyWidget
        apiKey="YOUR_API_KEY_HERE"
        position="bottom-right"
        primaryColor="#005B63"
        accentColor="#F45500"
        welcomeMessage="Hi! How can we help?"
      />
    </div>
  );
}

Configuration Props

apiKey

Your unique API key from dashboard

position

Widget position: bottom-right, bottom-left

primaryColor

Main widget color (hex format)

onLoad

Callback when widget loads

Advanced Options

Custom Events & Callbacks

// Listen for widget events
window.chatplugify.on('widget:loaded', function() {
  console.log('Widget loaded successfully');
});

window.chatplugify.on('conversation:started', function(data) {
  console.log('New conversation started:', data);
});

window.chatplugify.on('message:sent', function(message) {
  console.log('Message sent:', message);
});

// Control widget programmatically
window.chatplugify.open();  // Open widget
window.chatplugify.close(); // Close widget
window.chatplugify.toggle(); // Toggle widget

Multi-language Support

window.chatplugifySettings = {
  apiKey: "YOUR_API_KEY_HERE",
  language: "auto", // Auto-detect or specify: "en", "ar", "es", "fr"
  translations: {
    en: {
      welcomeMessage: "Hello! How can we help you today?",
      placeholder: "Type your message...",
      sendButton: "Send"
    },
    ar: {
      welcomeMessage: "مرحباً! كيف يمكننا مساعدتك اليوم؟",
      placeholder: "اكتب رسالتك...",
      sendButton: "إرسال"
    }
  }
};

Custom CSS Integration

/* Custom CSS for widget styling */
.chatplugify-widget {
  /* Override widget container styles */
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 91, 99, 0.2) !important;
}

.chatplugify-launcher {
  /* Custom launcher button styles */
  background: linear-gradient(135deg, #005B63 0%, #F45500 100%) !important;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

Testing & Validation

Integration Checklist

Basic Functionality

Widget loads correctly
Messages send and receive
Colors match brand
Position is correct

Advanced Features

Mobile responsiveness
Business hours work
Events trigger correctly
Custom styling applied

Next: Introduction