Build smart AI chatbot with Open AI assistant in few minutes!
Tags: openai, opensource, chatgpt, chatbot
Published: 2024-02-01 22:49:32

Hello dev! In this tutorial we will present how to use [OpenAssistantGPT](https://www.openassistantgpt.io/) to build smart chatbot for your website. In this developer-friendly guide, we'll walk you through the seamless process of crafting your own chatbot using the OpenAI platform. Whether you're a seasoned coder or just diving into the world of development, our open-source platform provides an accessible and user-friendly approach to integrating chatbots with Open AI Sssistants into your projects.

[OpenAssistantGPT](https://www.openassistantgpt.io/) goes beyond the ordinary – it learns from custom content, gaining a comprehensive understanding of your business when armed with the right information. Thanks to our website integration, your customers can now pose any question and receive intelligent responses.

If you want to skip the boring stuff you can go directly to our website and start the [Onboarding](https://www.openassistantgpt.io/dashboard/onboarding).

![OpenAssistantGPT Dashbaord](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5214c8rzznnd74fxe854.png)


**Getting Started:**

**Step 1 — Configure your OpenAssistantGPT Account:**
Get ready to embark on your chatbot creation journey by setting up two essential accounts:

A Google account or Github account for connecting to OpenAssistantGPT.
An OpenAI account.

1. Open https://www.openassistantgpt.io/dashboard/settings.
2. In a new window open https://platform.openai.com/api-keys and create a new secret key.
3. Set this new secret key in your OpenAssistantGPT settings.

With your account now configured, let’s move on to Step 2.

**Step 2 — Upload Your First File:**
The magic begins with a file containing the content your chatbot will pull information from. Supported file types include .docx, .txt, .slx, .csv, and more. Create your own file by copying website content or extracting information from a custom source. Remember to use publicly available information for security reasons, as your chatbot will be accessible once added to your website.

Follow these steps:

1. Open https://www.openassistantgpt.io/dashboard/files.
2. Upload your file with custom content.

![Files Dashbaord](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zu7omfiq1l2ujvqphgnc.png)

**Step 3 — Create Your Chatbot:**
Now, let's dive into creating your first chatbot.

1. Open https://www.openassistantgpt.io/dashboard/new/chatbot.
2. Fill in the necessary details, including the name, welcome message, OpenAI model, etc.
3. Press 'Create.'
4. Visit your chatbot list at https://www.openassistantgpt.io/dashboard/chatbots. Use the triple dots on the right of your new chatbot to choose the 'Chat' option.

![Create chatbot form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcpnf3vy8i3551n4gw1m.png)

**Engage in Conversation:**
After 10–15 minutes, you'll have your very own smart chatbot armed with custom content. To make it public to your customers, embed the chatbot on your website, just like we've done on our homepage. Soon, customers will be interacting, asking questions about your business, and receiving smart answers.

![Chat Box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucssoaz5g048soc6ukc9.png)


**Embed the chatbot in your website**
Finally, you can embed the chatbot with few lines of code in your website.

```
<script>
  window.chatbotConfig = {
    chatbotId: 'clq6m06gc78970114hm42s838g2',
  }
</script>

<body>
  <script src="https://www.openassistantgpt.io/chatbot.js"></script>
</body>
```

With this code you will get a result like this one on our main page:

![Embed chatbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thvogcosboqhy525c4qk.png)


Stay updated by following OpenAssistantGPT on [Twitter](https://twitter.com/oassistantgpt)! Start your chatbot journey today and make conversations smarter and more engaging. 🚀