// app.component.html - Enhanced Navigation

Widget Installation Guide

Follow these simple steps to add your voice-enabled AI chatbot to your website.

Step 1: Copy Your Widget Code

After creating your bot, copy the widget embed code from your bot's dashboard. It should look like this: 

<script src="https://www.applabc.com/app-lab-voice.js?v=1.3"></script>
<app-lab-voice-widget
  bot-id="YOUR_BOT_ID"
  api-url="https://www.applabc.com"
></app-lab-voice-widget>

Make sure to replace YOUR_BOT_ID with the unique ID provided in your bot's dashboard.

Step 2: Add the Code to Your Website

Add the code snippet to your website's HTML. You can place it in one of these locations:

  • Inside the <body> tag:

    The bot will load when your page loads. Best for most sites.

  • Footer section:

    Add it to your website's footer for consistent presence across all pages.

  • Within a specific container:

    To position the bot in a specific area of your page, place it within a container element.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- App Lab Voice Bot Widget -->
    <script src="https://www.applabc.com/app-lab-voice.js?v=1.3"></script>
    <app-lab-voice-widget
      bot-id="YOUR_BOT_ID"
      api-url="https://www.applabc.com"
    ></app-lab-voice-widget>
</body>
</html>

Step 3: Verify Installation

After adding the widget to your site:

  1. Load your website in a browser
  2. Look for the chat button in the corner of your page (based on your configuration)
  3. Click the button to open the chat interface
  4. Try sending a test message to verify the bot is responding

Note: If the widget doesn't appear, check your browser's console for any errors and ensure your domain matches the one configured in your bot settings.

Troubleshooting

Widget Not Appearing

  • Verify your bot is set to "Active" in the dashboard
  • Check that your website domain matches the domain in your bot settings
  • Make sure you're using the correct bot ID in the embed code
  • Try clearing your browser cache and reloading the page

Bot Not Responding

  • Verify your OpenAI API key is valid and has sufficient credits
  • Check your network connectivity
  • Look for any errors in browser's developer console (F12)

Voice Features Not Working

  • Ensure you're using a modern browser that supports WebRTC
  • Grant microphone permissions when prompted
  • Check that the voice version parameter is correct in the script URL

Need More Help?

If you're still having trouble installing the widget or have questions, please contact our support team:

📧[email protected]📝Contact Form