advantev-voice

ADV Client Integration

Overview

This project integrates the ADV client into any website, providing a voice assistant for support purposes. The ADV client is powered by an easy-to-install JavaScript SDK, which is included in the website via a simple code snippet.

Features

• Voice Assistant: Enhance user experience with our voice assistant instantly.
• Customization: Configure the assistant's settings to match your website's needs.
• UI Flexibility: If needed, use the exposed CSS classes to further customize the appearance and behavior of the assistant on your webpage.

Installation

To add ADV to your website, include the following javascript snippet in your HTML file inside a script tag:

<script>
  (function (d, t) {
    var g = document.createElement(t),
      s = d.getElementsByTagName(t)[0];
    g.src =
      "https://cdn.jsdelivr.net/npm/advantev-voice@1.0.2/src/index.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);

    g.onload = function () {
      const adv = window.advSDK.run({
        apiKey: "", // required
        assistant: assistant, // required
        config: buttonConfig // optional
      });
    };
  })(document, "script");
</script>

Where value of assistant can be your assistant ID (Dashboard > Assistants > Select your assistant > Copy the id) or assistant config like below example.

const assistant = {
  model: {
    provider: "openai",
    model: "gpt-3.5-turbo",
    systemPrompt:
      "You're a versatile AI assistant named adv who is fun to talk with.",
  },
  voice: {
    provider: "11labs",
    voiceId: "paula",
  },
  firstMessage: "Hi, I am adv how can I assist you today?",
};

You can also customise the look and feel of your adv Support Button using the following configurations. The button will have 3 states, idle, loading and active.

const buttonConfig = {
  position: "bottom-right", // "bottom" | "top" | "left" | "right" | "top-right" | "top-left" | "bottom-left" | "bottom-right"
  offset: "40px", // decide how far the button should be from the edge
  width: "50px", // min-width of the button
  height: "50px", // height of the button
  idle: {
    // button state when the call is not active.
    color: `rgb(93, 254, 202)`,
    type: "pill", // or "round"
    title: "Have a quick question?", // only required in case of Pill
    subtitle: "Talk with our AI assistant", // only required in case of pill
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone.svg`,
  },
  loading: {
    // button state when the call is connecting
    color: `rgb(93, 124, 202)`,
    type: "pill", // or "round"
    title: "Connecting...", // only required in case of Pill
    subtitle: "Please wait", // only required in case of pill
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg`,
  },
  active: {
    // button state when the call is in progress or active.
    color: `rgb(255, 0, 0)`,
    type: "pill", // or "round"
    title: "Call is in progress...", // only required in case of Pill
    subtitle: "End the call.", // only required in case of pill
    icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg`,
  },
};