Embedding Your AI Agent on Your Website

This section explains how to integrate your AI agent directly into your website, allowing visitors to initiate voice calls instantly. This enhances customer engagement and provides a convenient communication channel.

Key Features

  • Easy Integration: Embed the call widget with a simple code snippet.
  • Customizable Appearance: Tailor the widget's position, color, and icon to match your website's design.
  • Advanced Features: Leverage features like custom caller ID, AI context, hidden mode, and call events for a personalized experience.
  • Live Preview: See how the widget will look and behave on your website in real-time.
  • Cross-Platform Compatibility: Works seamlessly across devices and browsers.

Embedding the Widget

Basic Setup

  1. Copy the Code Snippet: Copy the provided JavaScript code, which includes the initialization parameters. This snippet is dynamically generated and tailored to your specific agent.
  2. Paste into Your Website: Paste the code snippet into your website's HTML, just before the closing </body> tag.

Customization

  • Button Position: Control where the floating call button appears on your website. Options include:
    • bottom-right (Default)
    • bottom-left
    • top-right
    • top-left
  • Button Color: Choose from a selection of predefined colors or use a custom hexadecimal color code.
  • Live Preview: The "Live Preview" section shows a real-time preview of your widget, reflecting your chosen customization options.

Advanced Features

  • Unique Caller ID:

    • A unique identifier (starting with "000") is automatically generated and stored in each visitor's browser for tracking returning visitors.
    • You can set a custom caller ID in international format using the callerId parameter.

  • AI Context:

    • Pass additional context to your AI agent to personalize interactions using the context parameter.

  • Hidden Mode:

    • Hide the default floating button and trigger the call widget programmatically using VirtualPhone.startCall(). Set the hidden parameter to true during initialization.

  • Dynamic Language Selection:

    • Start calls in different languages using the startCall method with a language code parameter: 
      
// Start a call in Spanish (Spain)
VirtualPhone.startCall('es-ES');

    // Start a call in French (France) VirtualPhone.startCall('fr-FR');

    // Start a call in English (US) VirtualPhone.startCall('en-US');

    // Start a call in default language VirtualPhone.startCall();

  • Call Events:

    • Monitor call status changes with JavaScript events:
      • accept: Triggered when the call connects.
      • disconnect: Triggered when the call ends.
      • error: Triggered if there's a call error.