Learn how to embed the Rocket Flow chatbot widget in different platforms and frameworks.

Embedding Guide

HTML/JavaScript

Add the widget to any website by including our script tag:

<script 
  async 
  type="text/javascript" 
  data-chat-id="YOUR_CHAT_ID" 
  src="https://widget.getrocketflow.io/rkt-chat-loader.js">
</script>

React

Using the React Component

import { Widget } from "@rkt/widget/widget";
import "@rkt/widget/styles.css";
 
function App() {
  return (
    <Widget 
      chatId="YOUR_CHAT_ID"
      theme="light"
      position={{ bottom: 20, right: 20 }}
    />
  );
}

With Custom Styling

function App() {
  return (
    <Widget 
      chatId="YOUR_CHAT_ID"
      className="rkt-bg-neutral-900 rkt-text-white"
      initialMessage="How can I help you today?"
    />
  );
}

Next.js

App Router (React Server Components)

// app/layout.tsx
import { Widget } from "@rkt/widget/widget";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {children}
        <Widget chatId={process.env.NEXT_PUBLIC_CHAT_ID} />
      </body>
    </html>
  );
}

Pages Router

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { Widget } from "@rkt/widget/widget";
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Widget chatId={process.env.NEXT_PUBLIC_CHAT_ID} />
    </>
  );
}

Vue.js

Using the Script Loader

<!-- App.vue -->
<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>
 
<script>
export default {
  name: 'App',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://widget.getrocketflow.io/rkt-chat-loader.js';
    script.async = true;
    script.setAttribute('data-chat-id', 'YOUR_CHAT_ID');
    document.body.appendChild(script);
  }
}
</script>

WordPress

Add the widget to your WordPress site by inserting the script in your theme's footer:

// functions.php
function add_rocket_flow_widget() {
    ?>
    <script 
      async 
      type="text/javascript" 
      data-chat-id="YOUR_CHAT_ID" 
      src="https://widget.getrocketflow.io/rkt-chat-loader.js">
    </script>
    <?php
}
add_action('wp_footer', 'add_rocket_flow_widget');

Advanced Configuration

Custom Events

const widget = document.querySelector('rkt-widget');
 
widget.addEventListener('message:sent', (event) => {
  console.log('Message sent:', event.detail);
});
 
widget.addEventListener('message:received', (event) => {
  console.log('Message received:', event.detail);
});

Programmatic Control

const widget = document.querySelector('rkt-widget');
 
// Open widget
widget.open();
 
// Close widget
widget.close();
 
// Send message
widget.sendMessage('Hello!');
 
// Clear chat
widget.clearChat();

For more configuration options and API details, check out our Configuration Guide and API Reference.

Embedding Guide

On this page