Import Package

import { initVoxioAgent } from "voxioagent";

Put your api key for validation

initVoxioAgent({
  apiKey: "<your-api-key>",
});

for icon customisation and icon postioning

example

function app() {
  useEffect(() => {
    const init = async () => {
      await initVoxioAgent({
        apiKey: "<your-api-key> in env file"
        position: { (for fix postion)
          bottom: "50px",
          right: "50px"
        },
        icons: {  (for custom icon for every actions)
          idleIcon: "https://example.com/my-idle-icon.png",
          listeningIcon: "https://example.com/my-listening-icon.gif",
          speakingIcon: "https://example.com/my-speaking-icon.gif",
          floating: true, (add this for floating)
          draggable: (add this  for draggable)
          customStyles: `  (for custom icon designs)
            img {
              width: 6rem !important;
              height: 6rem !important;
              border: 2px solid #4CAF50;
            }
          `
        }
      });
    };
    init();
  }, []);}









## Voicebot should be integerated in your frontend, check it out


## this is for chat-bot integrations and icon customisations



import React, { useEffect } from "react";
// Import the chatbot initializer
import { initVoxioChatbot } from "voxio-agents-sdk";

function App() {
  useEffect(() => {
    const init = async () => {
      try {
        await initVoxioChatbot({
          apiKey: process.env.REACT_APP_VOXIO_API_KEY, // Your API Key
          config: {
            // Visual Customization
           "botName": "Support Bot",
      "botAvatar": "https://example.com/bot-icon.png",
      "botStatus": "Always Online",
      "primaryColor": "#4f46e5",
      "userMessageBg": "linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)",
      "welcomeMessage": "Hello! Welcome to our support chat. How can I assist you?",
      "position": {
        "bottom": "20px",
        "right": "20px"
      },
      "iconShape": "rounded-square",
      "iconSize": "65px",
      "chatWidth": "400px",
      "chatHeight": "600px",
      "showExpandButton": true
          },
        });
        console.log("Chatbot initialized successfully");
      } catch (error) {
        console.error("Failed to initialize chatbot:", error);
      }
    };

    init();
  }, []); // Empty dependency array = runs once on mount

  return (
    <div style={{ padding: "20px" }}>
      <h1>My Application</h1>
      <p>The chatbot floating icon will appear in the bottom right corner.</p>
    </div>
  );
}

export default App;