Learn how to integrate Vanus AI into your website using JavaScript code.

September 1, 2023 4 min read

Ehis Akhile

Introduction
Step 1: Create an AI Application
Step 2: Integration
Step 3: Using the AI on your Website
Conclusion

Introduction

Welcome to our tutorial on integrating Vanus AI, an advanced AI platform designed for building AI Bots. In this guide, we will walk you through the process of seamlessly integrating Vanus AI into your e-commerce website to enhance customer support and assistance.

With Vanus AI, you can harness the power of artificial intelligence to create intelligent, responsive bots that can engage and assist your customers, making their experience on your platform smoother and more enjoyable.

Whether you’re looking to answer customer queries, recommend products, or provide real-time support, this tutorial will provide you with the essential steps to make your e-commerce website smarter and more customer-centric. Let’s dive in and unlock the potential of Vanus AI for your online business.

Step 1: Create an AI Application

Visit the Vanus AI website.
Click on Create App.
Name your App and select a Language Model.
Upload the knowledge base of your business if you have any
Click Create.

If you have already created the AI but haven’t yet uploaded your knowledge base, navigate to the Knowledge Base tab and proceed to upload the file or link.

Here is an example of how the information in the knowledge base is presented:

Lilies

Description: Majestic and trumpet-shaped, lilies are available in various colors, including white, 
pink, orange, and red. They represent purity and virtue and are commonly used in religious 
ceremonies and special occasions.

Link: http://localhost:8080/lilies

This is the image of sunflowers ![roses](http://localhost:8080/img/lilies300.webp)

Quantity: 180 stems (mixed colors)

The prompt tab offers you the opportunity to customize the AI according to your specific requirements. Here’s the prompt that was employed in developing the AI for this e-commerce business.

Role: Florist Assistant at Pixie Flowers

Your name is Pixie

Welcome to Pixie Flowers, where the magic of nature comes to life through our exquisite floral creations! 
examples of answers: 

Question "Hi"
Response: "Welcome to Pixie Flowers! How can I assist you today?"

Question: "I am looking for roses."
Response: "Ah, the timeless beauty of roses! You're in luck, as we have a wonderful variety of roses to choose from. Whether it's passionate reds, serene whites, or captivating pinks, we have them all in their full blooming splendor. Don't wait too long to bring this floral elegance into your life!To order now follow this link "

Question: "I am looking for flowers."
Response: "Thank you for gracing us with your presence! We're thrilled to help you find the perfect flowers for your special occasion. Every flower has a story, and we want to tailor a bouquet that reflects the essence of your celebration. Could you share more about the occasion? Is it a joyous birthday, a heartfelt anniversary, or perhaps you simply want to brighten someone's day with a surprise gift of nature's finest? Let me know, and we'll work our floral magic to make it extraordinary!"
show images in markdown.

Keep your answers short and concise.

You can also configure the Settings like the App Greeting field

Step 2: Integration

To get access to the JS Script code, click on the Dashboard tab, scroll down and copy the code.
Insert the code within the <header> tag of your webpage. Feel free to place it on multiple pages where you want the AI to be visible.

Step 3: Using the AI on your Website

Once you’ve inserted the code into the website’s head tag, you’ll be able to observe the AI on the integrated page, and you can start interacting with it.

Conclusion

Vanus AI offers the potential to significantly enhance user experience on an e-commerce website. By seamlessly integrating Vanus AI into your platform, you can achieve the following improvements:

Real-Time Assistance: Your AI can provide immediate assistance to website visitors, answering questions, addressing concerns, and offering guidance, ensuring that users have access to help whenever they need it.

Personalized Recommendations: Your AI can analyze user preferences and browsing behavior to offer tailored product recommendations, increasing the likelihood of conversions and improving the overall shopping experience.

Efficient Search: The AI can enhance the site’s search functionality, helping users find products faster and more accurately by understanding natural language queries.

24/7 Support: With AI-powered chatbots, your website can provide round-the-clock customer support, improving accessibility and responsiveness, even outside of regular business hours.

Reduced Cart Abandonment: The AI can engage users who are about to abandon their shopping carts, offering incentives or assistance to encourage them to complete their purchases.

Enhanced User Engagement: By engaging users in meaningful conversations, the AI can keep visitors on your website longer, increasing engagement and the likelihood of conversions.