https://vapi.ai/ logo
Join Discord
Powered by
Is possible to install more than 1 assistant into ...
# support
t
Hi, can i install 2 or more agents into 1 website?! I tried to use the web snippet but i not work
s
Hey Tuans, it's definitely possible to use more than one assistant within a web application. If you can help me understand how you're planning to use them, I can definitely try to help you out with some code.
t
I want to apply 2 separated assistants in my website but i have not seen the payload for it in Vapi Doc. I tried to put 2 assistant_ids but it doesnot works. Can u just give the guideline How to install it with web snippet
s
The key is to initialize separate instances of the Vapi widget, each with its own unique configuration and assistant ID. Here's how you can implement this:
Copy code
html
<script>
  // First Assistant Instance
  var vapiInstance1 = null;
  const assistant1 = "your_first_assistant_id"; 
  const apiKey = "your_api_key";
  const buttonConfig1 = {
    position: "bottom-right",
    offset: "40px",
    width: "50px",
    height: "50px",
    idle: {
      color: "rgb(93, 254, 202)",
      type: "pill",
      title: "Sales Assistant",
      subtitle: "Talk with our Sales AI",
      icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone.svg",
    },
    // Add loading and active states as needed
  };

  // Second Assistant Instance
  var vapiInstance2 = null;
  const assistant2 = "your_second_assistant_id"; 
  const buttonConfig2 = {
    position: "bottom-left", // Different position for the second button
    offset: "40px",
    width: "50px",
    height: "50px",
    idle: {
      color: "rgb(93, 124, 202)", // Different color
      type: "pill",
      title: "Support Assistant",
      subtitle: "Get technical help",
      icon: "https://unpkg.com/lucide-static@0.321.0/icons/help-circle.svg",
    },
    // Add loading and active states as needed
  };

  // Load the Vapi SDK
  (function (d, t) {
    var g = document.createElement(t),
      s = d.getElementsByTagName(t)[0];
    g.src =
      "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);

    g.onload = function () {
      // Initialize first assistant
      vapiInstance1 = window.vapiSDK.run({
        apiKey: apiKey,
        assistant: assistant1,
        config: buttonConfig1,
      });
      
      // Initialize second assistant
      vapiInstance2 = window.vapiSDK.run({
        apiKey: apiKey,
        assistant: assistant2,
        config: buttonConfig2,
      });
    };
  })(document, "script");
</script>
## Key Points 1. **Multiple Instances**: Create separate variables for each Vapi instance (vapiInstance1, vapiInstance2) 2. **Different Assistant IDs**: Use different assistant IDs for each instance 3. **Unique Configurations**: - Use different positions (e.g., bottom-right, bottom-left) - Different colors and titles to distinguish between assistants - Different icons to represent their different purposes 4. **Initialize Both**: Call 
window.vapiSDK.run()
multiple times with different configurations after the SDK loads 5. **Design Considerations**: Make sure the buttons are placed in positions that don't overlap or interfere with each other. Use the position and offset parameters to control this. This approach allows you to have completely separate assistants with different purposes, each with its own configuration, appearance, and behavior on the same website.
t
that is great. Let’s me try. Thank you for your kind support
s
Marking this ticket as Solved ✅
t
:(, it does not work. 2 assistants are stacked on top of each other
m
I have the same problem: getting two snippets one on top of the other.
s
@Tuans2 @Marcos Polanco The key issue appears to be in how we're initializing the Vapi instances. Let me provide an improved solution. https://cdn.discordapp.com/attachments/1352292464538423456/1353900672558301294/message.txt?ex=67e355c2&is=67e20442&hm=6822337175b8dddc07d6ef8467e1cc4e62872a81e77aeab772a7a30cc7d082df&
This solves the issue of multiple Vapi assistants stacking on top of each other. ## Key Solution Elements ### 1. Dedicated Container Elements The main solution is creating dedicated container elements for each Vapi assistant:
Copy code
html
<div id="vapi-container-1"></div>
<div id="vapi-container-2"></div>
### 2. Fixed Positioning with CSS I've added CSS to position these containers precisely where you want each assistant to appear:
Copy code
css
#vapi-container-1, #vapi-container-2 {
  position: fixed;
  z-index: 9999;
}
#vapi-container-1 {
  bottom: 20px;
  right: 20px;
}
#vapi-container-2 {
  bottom: 20px;
  left: 20px;
}
### 3. Container Parameter in Vapi Initialization The critical part is using the 
container
parameter when initializing each Vapi instance, which tells each assistant precisely where to render:
Copy code
javascript
vapiInstance1 = window.vapiSDK.run({
  apiKey: apiKey,
  assistant: assistant1,
  config: buttonConfig1,
  container: document.getElementById('vapi-container-1')
});
## Implementation Steps 1. Replace 
your_first_assistant_id
, 
your_second_assistant_id
, and 
your_api_key
with your actual Vapi assistant IDs and API key. 2. Include this file in your website or adapt the code to fit your existing HTML structure. 3. Customize the button configurations as needed (colors, text, icons, etc.). 4. The assistants are set to appear in the bottom-right and bottom-left corners, but you can adjust this by modifying the CSS for the container elements. Each assistant will have its own independent functionality and appearance on your website. Users can interact with either assistant without them interfering with each other.
PreviousNext
Powered by