What happened to that big button DEMO?

yucky-gold · 2024-05-16T02:36:27.132Z

I don't remember how this was called but I used it to demo to potential clients and it was super efficient. This was the big green wavy bubble that you would click on to get the assistant starting

A

Ask Inkeep•5/16/24, 2:36 AM

Hi @Martin ツ

, I'm an AI assistant for Vapi. I'll analyze available sources and get back to you shortly.

A

Ask Inkeep•5/16/24, 2:36 AM

-----------------------------
While I generate an answer, here are some sources that might be helpful:

Web Calling
Create Assistant
Update Assistant
Inbound Calling
-----------------------------

A

Ask Inkeep•5/16/24, 2:36 AM

Answer

If you're referring to the demo button configuration, you can use the Vapi widget snippet to customize and deploy it on your website. Here is an example of how you can configure the button in your HTML:

<script>
var vapiInstance = null;
const assistant = "<your-assistant-id>";
const apiKey = "<your-api-key>";
const buttonConfig = {
    width: "100px",
    height: "100px",
    idle: { 
        color: "rgb(93, 254, 202)",
        type: "pill",
        title: "Have a quick question?",
        subtitle: "Talk with our AI assistant",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone.svg",
    },
    loading: { 
        color: "rgb(93, 124, 202)",
        type: "pill",
        title: "Connecting...",
        subtitle: "Please wait",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg",
    },
    active: { 
        color: "rgb(255, 0, 0)",
        type: "pill",
        title: "Call is in progress...",
        subtitle: "End the call.",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg",
    },
};
(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 () {
        vapiInstance = window.vapiSDK.run({
            apiKey: apiKey,
            assistant: assistant,
            config: buttonConfig,
        });
    };
})(document, "script");
</script>

<script>
var vapiInstance = null;
const assistant = "<your-assistant-id>";
const apiKey = "<your-api-key>";
const buttonConfig = {
    width: "100px",
    height: "100px",
    idle: { 
        color: "rgb(93, 254, 202)",
        type: "pill",
        title: "Have a quick question?",
        subtitle: "Talk with our AI assistant",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone.svg",
    },
    loading: { 
        color: "rgb(93, 124, 202)",
        type: "pill",
        title: "Connecting...",
        subtitle: "Please wait",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg",
    },
    active: { 
        color: "rgb(255, 0, 0)",
        type: "pill",
        title: "Call is in progress...",
        subtitle: "End the call.",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg",
    },
};
(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 () {
        vapiInstance = window.vapiSDK.run({
            apiKey: apiKey,
            assistant: assistant,
            config: buttonConfig,
        });
    };
})(document, "script");
</script>

<script>
var vapiInstance = null;
const assistant = "<your-assistant-id>";
const apiKey = "<your-api-key>";
const buttonConfig = {
    width: "100px",
    height: "100px",
    idle: { 
        color: "rgb(93, 254, 202)",
        type: "pill",
        title: "Have a quick question?",
        subtitle: "Talk with our AI assistant",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone.svg",
    },
    loading: { 
        color: "rgb(93, 124, 202)",
        type: "pill",
        title: "Connecting...",
        subtitle: "Please wait",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg",
    },
    active: { 
        color: "rgb(255, 0, 0)",
        type: "pill",
        title: "Call is in progress...",
        subtitle: "End the call.",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg",
    },
};
(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 () {
        vapiInstance = window.vapiSDK.run({
            apiKey: apiKey,
            assistant: assistant,
            config: buttonConfig,
        });
    };
})(document, "script");
</script>

<script>
var vapiInstance = null;
const assistant = "<your-assistant-id>";
const apiKey = "<your-api-key>";
const buttonConfig = {
    width: "100px",
    height: "100px",
    idle: { 
        color: "rgb(93, 254, 202)",
        type: "pill",
        title: "Have a quick question?",
        subtitle: "Talk with our AI assistant",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone.svg",
    },
    loading: { 
        color: "rgb(93, 124, 202)",
        type: "pill",
        title: "Connecting...",
        subtitle: "Please wait",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg",
    },
    active: { 
        color: "rgb(255, 0, 0)",
        type: "pill",
        title: "Call is in progress...",
        subtitle: "End the call.",
        icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg",
    },
};
(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 () {
        vapiInstance = window.vapiSDK.run({
            apiKey: apiKey,
            assistant: assistant,
            config: buttonConfig,
        });
    };
})(document, "script");
</script>

A

Ask Inkeep•5/16/24, 2:36 AM

supportHelp with Vapi implementation with Bubble.io , supportVapi widget - Bubble.io

This code sets up a customizable button for your Vapi assistant. Make sure to replace

<your-assistant-id>

<your-assistant-id>

<your-assistant-id>

<your-assistant-id> and

<your-api-key>

<your-api-key>

<your-api-key>

<your-api-key> with your actual Vapi assistant ID and API key.

Sources
[1] Help with Vapi implementation with Bubble.io
[2] Vapi widget - Bubble.io

AAsk Inkeep [(1)](<https://discord.com/channels/1211482211119796234/1235999834842857482>) , ...

A

Ask InkeepAPP•5/16/24, 2:37 AM

Got it. Tagging @Vapi Team for additional help.

Y

yucky-goldOP•5/16/24, 2:37 AM

no I meant the one that was in the assistant window

L

living-lavender•5/16/24, 10:16 AM

It’s still there click on the share button

L

living-lavender•5/16/24, 10:16 AM

You will get the link

What happened to that big button DEMO?

Answer

Similar Threads

Similar Threads

Answer

Similar Threads