DEV Community

Cover image for How to integrate a Custom Chatbot into your website?
Eden AI
Eden AI

Posted on • Originally published at edenai.co

How to integrate a Custom Chatbot into your website?

🤖 Learn how to revolutionize your website’s user engagement with a custom chatbot trained on your own data using Eden AI’s Custom Chatbot Workflow.‍

1. What is Eden AI’s Custom Chatbot Workflow?

AskYoda, or “Ask Your Data,” is a versatile workflow developed by Eden AI that empowers users to create custom chatbots on their own data or business-specific information with any AI model from a wide range of LLMs available on the market: OpenAI GPT 4, Cohere Command, Google Cloud PaLM2, Meta Llama2, and more.

Your chatbot can be integrated into a website or application to allow users to ask questions and receive responses based on the data the chatbot has been trained on. The repository on GitHub contains the source code for using and displaying your Chatbot in a website, with branches for the unframed source code and the embed code.‍

Askyoda on Eden AI App

Eden AI’s Custom Chatbot addresses limitations by facilitating data integration and training in multiple programming languages. It has broad applications across industries, making it a versatile tool for businesses, students, content creators, and researchers to train chatbots with their own data.

2. Benefits of adding a custom chatbot into your website

Integrating a custom chatbot into your website can be a game-changer, offering a range of benefits that enhance user experience and streamline operations. Here’s why it’s advantageous for companies to incorporate a custom chatbot:‍

- Improved Customer Service: Custom chatbots provide fast and 24/7 customer support, reducing wait times and offering instant assistance to users globally, even outside regular business hours.
- Personalized Experiences: By collecting and utilizing personal data, AI chatbots can offer more personalized interactions, enhancing the overall customer experience and satisfaction.
- Scalability: Custom chatbots can handle a large volume of inquiries simultaneously without compromising quality, allowing businesses to scale their customer support operations efficiently as they grow.
- Data Insights: Training the chatbot on company-specific data enables businesses to gather valuable insights into customer behavior, preferences, and common issues, which can be used to enhance products, services, and marketing strategies.‍

This can save time and effort for your employees, allowing them to focus on more critical tasks.

3. How to build and integrate a chatbot into your website?

Step 1. Create an account on Eden AI for free

To begin utilizing Eden AI’s Chatbot AskYoda, the first step is to create a free account on Eden AI. Once registered, you can obtain your API key 🔑 directly from the homepage. This key can then be used with the free credits provided by Eden AI.

Eden AI App

Get your API key for FREE.

Step 2. Train your Custom Chatbot on your own Data

Prior to deploying your chatbot, optimize its performance by training it with your tailored dataset for enhanced functionality.

To get started, in the Eden AI app, go to “Workflows” in the left sidebar to access Eden AI’s Custom Chatbot AskYoda from the dropdown menu.

AskYoda on Eden AI creating a project

  1. Click on “Create Project” and proceed to choose a name for your project. Decide whether to begin with the “Quickstart” option or opt to “Start from Scratch.” Selecting “Start from Scratch” grants you the flexibility to choose any option, which can be modified later.

AskYoda project on Eden AI

With the start from scratch option, you have the flexibility to select your current database provider, your embedding provider from a selection that includes Open AI, Google, Cohere and your LLM model.

In the future, there will be additional choices available, such as adjusting the chunk size, overlap, selecting an OCR provider, and a speech-to-text provider.

Creating AskYoda project on Eden AI

  1. After setting up your project, it’s time to populate the database.

Click on “Upload Data” and choose the relevant data for your project. You can repeat this process as needed to ensure your dataset is comprehensive.

Upload your data on AskYoda - Eden AI

You can upload your data in the form of texts, URLs, PDFs, MP3, or WAV. The PDFs will be automatically parsed by OCR and the audio files will undergo speech-to-text conversion. There is also a code snippet available to add data.

  1. With your dataset in place, your custom chatbot is now tailored to your specific needs. You can immediately test its functionality and accuracy:

Text Yodabot functionality

👏 Your custom chatbot is now ready. Let’s explore how to import it!‍

Step 3. Add your Custom Chatbot into your website

There are two ways to import your chatbot into your website.‍

Option 1: Integrate your Chatbot with a Code Snippet

Begin by copying the code snippet in your preferred language, either Python or JavaScript.‍

Javascript :

const axios = require("axios").default;
const options = {
method: "POST",
url:
"https://api.edenai.run/v2/aiproducts/askyoda/e3501019-28b7-46f0-8ed5-7a5600d409a1/ask_llm",
headers: {   
         authorization: "Bearer 🔑your API key",
},
data: {   
          query: "Which product is the most expensive?",   
          llm_provider: "openai",   
          llm_model: "gpt-3.5-turbo-instruct",   
          k: 5,   
          filter_documents: {"metadata1":"value1"},
},
};
axios.
request(options).
then((response) => {   
         console.log(response.data);
}).
catch((error) => {   
        console.error(error);
});
Enter fullscreen mode Exit fullscreen mode

Python:

import json
import requests

headers = {"Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo
iN2E5MjkwOTUtZDcxMC00MDM4LWI0N2MtMzAxYzlmZjVkOTRkIiwidHlwZSI6ImFwaV90b2tlbiJ9.ukbmBb6J-_y
nlkBUBLGVcOxsicygwU5m55sMfH6gS2M"}

url ="https://api.edenai.run/v2/aiproducts/askyoda/e3501019-28b7-46f0-8ed5-7a5600d409a1/ask_llm"
payload={
    "query": "Which product is the most expensive?",
    "llm_provider": "openai",
    "llm_model": "gpt-3.5-turbo-instruct", 
    "k": 5,
    "filter_documents":{"metadata1":"value1"}
}

response = requests.post(url, json=payload, headers=headers)

result = json.loads(response.text)
print(result)
Enter fullscreen mode Exit fullscreen mode

Once you’ve copied the code, your custom chatbot is ready to go!‍

Option 2: Integrate your Chatbot with HTML

Another method is to integrate your chatbot into your project by copying and pasting the provided HTML code:‍

<script src="https://cdn.jsdelivr.net/gh/edenai/yodabot@0dc64f2/embed.js?
project={project_id}&provider={your_llm_provider}&model={your_llm_model}&k={k}"></script>
Enter fullscreen mode Exit fullscreen mode

After copying and pasting the provided HTML code, ensure to replace the following parameters with your specific values:

- {project_id}: Your project id, available in the left panel of your AskYoda project, on the right side bar.

Change project ID on AskYoda

- {your_llm_provider}: Select an authorized LLM provider for your chatbot.
- {your_llm_model}: Choose an authorized LLM model for your chatbot.
- {k} (optional): Set the number of elements in the answer (1 to 30). The default value is 1.

Additionally, you can customize your chatbot with these options:

- Title: Define a title to replace the default title.
- Message: Define a message to display at the beginning of the chat.
- Color: Change the icon’s color. You can enter “red”, “black”, “blue”, etc. You can also add color codes, for example, “#FF0000”.


Chatbot representation on Eden AI

Before each optional parameter, you have to add “&”. For example, after replacing the necessary parameters, your code might look like this:

<script src=”https://cdn.jsdelivr.net/gh/edenai/yodabot@0dc64f2/embed.js?project={project_id}&provider=mistral&model=small&k=1&title=my customized bot&message=hello i’m customized bot&color=red”></script>
Enter fullscreen mode Exit fullscreen mode

For further details, you can also explore the repository.‍

Step 4: Start scaling and monitoring the performance of your API

As your application grows, monitor the performance and scalability of Eden AI’s Chatbot AskYoda API integrated through Eden AI. Ensure that the API usage remains within acceptable limits and explore options for scaling up or optimizing API calls if necessary.

Regularly review the chatbot API on Eden AI to take advantage of any new updates or additions.

Monitoring of APIs on Eden AI

Conclusion‍
😎 Eden AI’s Chatbot Workflow AskYoda emerges as a dynamic tool that can revolutionize user engagement on websites. By leveraging customized data and advanced AI models, AskYoda empowers businesses to create personalized chatbots that cater to specific needs and preferences.

As companies strive to enhance their online presence and customer interactions, integrating a custom chatbot like Eden AI’s AskYoda can be a strategic move to boost user satisfaction, streamline operations, and drive business growth in the digital landscape.

Create your Account on Eden AI.

Top comments (0)