Platform Integrations

RocketFlow offers seamless integration with a wide variety of platforms and frameworks. Choose the integration method that works best for your setup.

Web Platforms

HTML/JavaScript

The simplest way to add RocketFlow to any website:

<script src="https://cdn.getrocketflow.io/widget.js" 
        data-chatbot-id="your-chatbot-id"
        data-position="bottom-right">
</script>

React/Next.js

Install the React component:

npm install @rocketflow/react

import { RocketFlowWidget } from '@rocketflow/react';

export default function App() {
  return (
    <div>
      <RocketFlowWidget 
        chatbotId="your-chatbot-id"
        position="bottom-right"
      />
    </div>
  );
}

Vue.js

npm install @rocketflow/vue

<template>
  <RocketFlowWidget 
    :chatbot-id="'your-chatbot-id'"
    position="bottom-right"
  />
</template>

<script>
import { RocketFlowWidget } from '@rocketflow/vue';

export default {
  components: {
    RocketFlowWidget
  }
}
</script>

Angular

npm install @rocketflow/angular

import { Component } from '@angular/core';
import { RocketFlowWidgetComponent } from '@rocketflow/angular';

@Component({
  selector: 'app-root',
  template: `
    <rocket-flow-widget 
      [chatbotId]="'your-chatbot-id'"
      position="bottom-right">
    </rocket-flow-widget>
  `,
  imports: [RocketFlowWidgetComponent]
})
export class AppComponent {}

CMS Platforms

WordPress

Install the RocketFlow plugin from the WordPress repository
Activate the plugin
Enter your chatbot ID in the plugin settings
The widget will automatically appear on your site

Webflow

Add a custom code element to your Webflow project
Insert the HTML embed code
Publish your site

Squarespace

Go to Settings > Advanced > Code Injection
Add the script to the Footer section
Save your changes

E-commerce Platforms

Shopify

Install the RocketFlow app from the Shopify App Store
Configure your chatbot settings
Customize the appearance to match your store

WooCommerce

Use the WordPress plugin method above, with additional e-commerce specific features.

API Integration

For custom integrations, use our REST API:

curl -X POST https://api.getrocketflow.io/v1/chat \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "message": "Hello, how can I help you?",
    "chatbot_id": "your-chatbot-id",
    "session_id": "user-session-123"
  }'

Mobile Apps

React Native

npm install @rocketflow/react-native

import { RocketFlowWidget } from '@rocketflow/react-native';

export default function App() {
  return (
    <RocketFlowWidget 
      chatbotId="your-chatbot-id"
      style={{ position: 'absolute', bottom: 20, right: 20 }}
    />
  );
}

Flutter

dependencies:
  rocketflow_flutter: ^1.0.0

import 'package:rocketflow_flutter/rocketflow_flutter.dart';

RocketFlowWidget(
  chatbotId: 'your-chatbot-id',
  position: RocketFlowPosition.bottomRight,
)

Configuration Options

All integrations support these configuration options:

Option	Type	Default	Description
`chatbotId`	string	required	Your chatbot's unique identifier
`position`	string	`bottom-right`	Widget position on screen
`theme`	object	`{}`	Custom theme colors and styling
`locale`	string	`en`	Language for the widget interface
`autoOpen`	boolean	`false`	Automatically open chat on page load
`showWelcomeMessage`	boolean	`true`	Show welcome message to new users

Advanced Configuration

Custom Styling

<script src="https://cdn.getrocketflow.io/widget.js" 
        data-chatbot-id="your-chatbot-id"
        data-theme='{"primaryColor": "#007bff", "backgroundColor": "#ffffff"}'>
</script>

Event Handling

window.RocketFlow = {
  onMessage: function(message) {
    console.log('New message:', message);
  },
  onChatOpen: function() {
    console.log('Chat opened');
  },
  onChatClose: function() {
    console.log('Chat closed');
  }
};

Troubleshooting

Common Issues

Widget not appearing:

Check that your chatbot ID is correct
Ensure the script is loaded after the DOM is ready
Check browser console for JavaScript errors

Styling conflicts:

Use CSS specificity to override default styles
Check for conflicting CSS frameworks
Use the data-theme attribute for custom styling

API errors:

Verify your API key is correct
Check rate limits and quotas
Ensure proper CORS configuration

Need Help?

API Documentation - Complete API reference
Troubleshooting Guide - Common issues and solutions
Support - Get help from our team

Integrations

On this page