https://vapi.ai/ logo
Join Discord
Powered by
Vapi Button on Webpage
# support
k
I used the web snippet to display a Vapi button on my website. However, I would like to adjust the button so that it doesn't wobble and I would like to position it in the flow of my page, not absolutely, but like the "Talk with Assistant" button in the Vapi dashboard. How is it done?
v
@KarlKing To adjust the VAPI button on your website to match the style of the "Talk with Assistant" button in the Vapi dashboard, you'll need to modify the 
buttonConfig
object to set the desired position and remove any animations that may cause it to wobble. Here's how you can update the `buttonConfig`: 1. Set the 
position
to a value that places the button in the flow of your page. If you want it to be inline, you might not use the 
position
property at all and instead rely on your site's CSS to place it. 2. Remove or adjust any CSS that may be causing the wobble effect. This could be a CSS animation or transform applied to the button. Since the 
buttonConfig
object does not directly support an 'inline' positioning, you would typically handle this with custom CSS on your website. You can add a class to the button and then style it accordingly in your CSS file. Here's an example of how you might adjust the `buttonConfig`:
Copy code
javascript
const buttonConfig = {
  // Remove the position property to allow for standard document flow positioning
  // Add a custom class to the button for styling
  customClass: "my-vapi-button",
  // Set any other properties you need
};
And in your CSS file:
Copy code
css
.my-vapi-button {
  /* Add your custom styles here */
  display: inline-block; /* Example: makes the button inline with text */
  margin: 10px; /* Example: adds some space around the button */
  /* Remove any wobble effect */
  animation: none;
}
Please adjust the CSS class name and styles according to your website's design and branding. If you need further assistance with the CSS or have specific requirements for the button's behavior, please let me know, and I'll be happy to help!
You can continue this conversation by mentioning me in the message.
s
You will need to use Web SDK, or if you want to do it via web snippet then see the button configuration or see the class and inject your css code to achieve your usecase.
k
I created a customClass: "my-vapi-button" and tried to include it. But "display: inline-block;" seems to have no effect. The Vapi button is still displayed centered at the bottom of the page, even though I moved it to a container (to use it in the page flow)
. Here is my demo attempt:
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vapi Assistant Button</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        .container {
            border: 1px solid black;
        }

        .vapi-btn {
            display: inline-block;
            margin: 10px;
            animation: none !important;
            transition: none !important;
        }

        /* Additional button states */
        .vapi-btn.vapi-btn-is-active {
            background-color: pink;
        }

        .vapi-btn.vapi-btn-is-loading {
            background-color: blue;
        }
    </style>
</head>

<body>

    <div class="container">
        <!-- The Vapi button should appear here -->
        <script>
            const assistantId = "b6a3bb64-xxxxxxxxxxxx";
            const apiKey = "0510bc6e-xxxxxxxxxx";
            const buttonConfig = {};

            (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() {
                    window.vapiSDK.run({
                        apiKey: apiKey,
                        assistant: assistantId,
                        config: {
                            customClass: "vapi-btn",
                        }
                    });
                };
            })(document, "script");
        </script>
    </div>
</body>
</html>
I would like to have the Vapi Button in the container (in the flow of my document). What am I doing wrong?
s
@Shubham Bajaj can you help him out?
s
because button position is set to absolute.
k
@Shubham Bajaj yes, that´s my question - how/where to change it?
s
override the position property to normal i guess and then it will work as your expecting it out to be.
32 Views
PreviousNext
Powered by