Ignite Global Support Home Start a conversation Sign in
Start a conversation
  1. MyPersonas
  2. Integrations
  3. Deploying MyPersonas on Your Website

Integrating MyPersonas Floating Action Button into Your Website 🌐

Transform your website into an interactive support hub by adding the MyPersonas floating action button. This feature allows your visitors to instantly access your digital experts directly from any page on your website, providing 24/7 assistance without leaving their browsing experience.

Overview

The MyPersonas floating action button is a customizable widget that appears on your website, giving visitors immediate access to your configured personas. When clicked, it opens an interactive chat interface where users can engage with your AI-powered experts.

Key Benefits:

  • Seamless Integration: Works with any website or web application
  • Dual Purpose: Provides both chat capabilities and knowledge from your website content
  • Customizable Appearance: Tailor the button text, position, and branding to match your site
  • No Code Complexity: Simple script installation similar to Google Analytics

Prerequisites

Before you begin, ensure you have:

  1. Website Access: Administrative access to add scripts to your website's header
  2. A MyPersona: At least one configured persona to appear on your website
  3. Website URL: The complete URL where you want to deploy the button

Step 1: Create the Website Integration

Navigate to Integrations

From your MyPersonas dashboard, click Integrations in the left sidebar.

Create New Integration

  1. Click New Integration in the top-right corner
  2. Select Website from the dropdown menu
  3. Enter your website URL (e.g., https://yourwebsite.com)

Configure Integration Settings

Essential Settings:

  • ✅ Display MyPersonas icon: Must be checked to show the floating button
  • Allowed domains: Add subdomains if you want the button on multiple versions of your site (e.g., eu.yoursite.com, shop.yoursite.com)

Optional Customization:

  • Custom title: Change the button's main text (default: "Launch MyPersonas")
  • Custom subtitle: Modify the description text (default: "Talk to your expert")

Select Pages and Create

  1. Click Connect to map your website
  2. Select which pages to ingest as knowledge (or select all)
  3. Add any additional URLs if needed
  4. Click Create

Step 2: Add the Script to Your Website

After creating the integration, you'll see the scripts page with installation code.

Copy the Installation Script

Choose the appropriate script format for your website:

  • Standard HTML websites
  • React applications
  • Next.js projects
  • Other frameworks

Install the Script

Add the copied script to your website's header section, similar to how you would add Google Analytics or other tracking scripts.

<!-- Add this to your website's <head> section -->
<script src="..." async></script>

Step 3: Connect Your MyPersona

Important: The floating button won't display any MyPersonas until you explicitly connect them.

Add Integration to Your MyPersona

  1. Go to the MyPersonas tab
  2. Click the menu (⋮) on your MyPersona card
  3. Select Manage Knowledge
  4. Navigate to the Integrations tab
  5. Click Add Integration
  6. Select your website integration

Step 4: Verify Installation

  1. Visit your website and refresh the page
  2. Look for the floating action button (default: bottom-right corner)
  3. Click the button to open the chat interface
  4. Verify your MyPersona appears and can answer questions

Customization Options

Button Appearance

Access customization options by editing your integration:

  1. Go to Integrations
  2. Click the menu (⋮) on your integration
  3. Select Edit
  4. Navigate to Chat Widget Appearance

Customizable Elements:

  • Position: Default is bottom-right, but can be anchored elsewhere
  • Title & Subtitle: Modify the button text
  • Logo: Upload custom branding (if available in your plan)

Advanced Positioning

The button is draggable by default, users can hover and drag it to reposition. For fixed custom positioning, use the placement options in settings.

Managing Multiple Domains

To show the floating button across multiple subdomains:

  1. Add each subdomain to the Allowed domains field during setup
  2. Format: subdomain.yoursite.com
  3. The script only needs to be added once to your main domain

Knowledge Base Integration

Your website content becomes part of your MyPersona's knowledge:

  • The MyPersona can answer questions about your products/services
  • Automatically stays updated if auto-refresh is enabled
  • You can limit which pages the MyPersona can reference

To customize knowledge access:

  1. Edit the integration from your MyPersona's knowledge management
  2. Select/deselect specific pages
  3. Save changes

Troubleshooting

Button Not Appearing

  • Verify the script is properly installed in your website's header
  • Check that "Display MyPersonas icon" is enabled in integration settings
  • Clear your browser cache and refresh

No MyPersonas Showing

  • Ensure you've added the website integration to at least one MyPersona
  • Verify the integration status shows "Completed"
  • Check that the MyPersona is active

Custom Styling Issues

  • The button inherits some styles from your website
  • Use CSS overrides if needed for specific positioning
  • Contact support for advanced customization needs

Best Practices

  1. Strategic Placement: Keep the button visible but not intrusive
  2. Clear Labeling: Use descriptive title/subtitle text that indicates the button's purpose
  3. Knowledge Sync: Enable auto-refresh to keep website content current
  4. Multiple MyPersonas: You can add multiple MyPersonas to appear based on different pages or user needs

Next Steps

Choose files or drag and drop files
Was this article helpful?
Yes
No

  1. Mohammad Mitwaly

  2. Posted
  3. Updated

Comments