---
updatedAt: 2025-11-13T22:58:47.000Z
agentTools:
  projectIndex: https://docs.botsonic.com/llms.txt
---

# Quick Start Guide

Create and embed a chatbot on any website in just a few minutes

<HTMLBlock>{`
<div style="position: relative; padding-bottom: 55.263157894736835%; height: 0;"><iframe src="https://www.loom.com/embed/15e371fa0fa14cdbadb3deaa57b3053a?sid=b550a31c-cad7-48ca-a093-0e06d72eaef0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
`}</HTMLBlock>

# Step 1 - Upload files or links of your knowledge base and help articles.

1. Log into your Botsonic account, click \[Home] from the left hand side menu to get to the Dashboard
2. Click \[Create bot]

   <Image align="center" className="border" border={true} src="https://files.readme.io/ee4f70b-image.png" />
3. Enter a name for your bot (eg. Customer Support), then click \[Create Bot]

<Image align="center" width="60% " src="https://files.readme.io/5aa4701-image.png" />

<br />

4. Upload Files - click the \[Sources] tab to upload documents of your knowledge base and help articles.

   * Click the \[Files] tab then upload the file/s into the upload box. You can upload multiple files at a time.
   * Click \[Upload and Train]

     <Image align="center" className="border" border={true} src="https://files.readme.io/e38d759-Sources_-_Files.png" />

<br />

5. Upload an Individual Link or URL - click the \[Sources] tab to add links of your knowledge base and help articles or a link to your website. *Read this to learn more about the different[Types of SOURCES](https://docs.botsonic.com/docs/how-to-upload-training-sources-for-your-bot) that you can upload to train your bot.*

   * Click the \[Links] tab, the paste the link into the space provided, then press enter or click the \[+] button. You can add multiple links at a time.
   * Click \[Submit]

     <Image align="center" className="border" border={true} src="https://files.readme.io/0b81439-Sources_-_Individual_Links.png" />

<HTMLBlock>{`
<br>
`}</HTMLBlock>

> 👍 Note:
>
> * All uploaded links can be found on the SOURCES > LINKS Page
> * You can view the status of the file if it's waiting, processing, and trained.
> * *Read this article to learn more about[configuring the FILE settings](https://docs.botsonic.com/docs/upload-files-pdf-doc-docx-txt) and how to [Auto Sync Data from Webpages](https://docs.botsonic.com/docs/auto-sync)*
>
> <Image align="center" className="border" border={true} src="https://files.readme.io/2ac684d-Sources_-_Individual_Links.png" />

<br />

<br />

# Step 2 - Customize the appearance of your bot

Click the \[Appearance] tab on the left hand side menu.  *Read this step by step guide on[How to Customize the APPEARANCE of Your Chatbot](https://docs.botsonic.com/docs/how-to-customize-the-appearance-of-your-chatbot)*

<Image align="center" className="border" border={true} src="https://files.readme.io/f6a2ed1-image.png" />

<br />

## Company Name

Enter your company name

<Image align="center" className="border" border={true} src="https://files.readme.io/83b2771-image.png" />

## Subheading

Customize your bot's subheading

<Image align="center" className="border" border={true} src="https://files.readme.io/bdbfa94-image.png" />

## Company Logo

Upload your company logo

<Image align="center" className="border" border={true} src="https://files.readme.io/b559435-image.png" />

## Bot Avatar

Upload an avatar for your bot

<Image align="center" className="border" border={true} src="https://files.readme.io/9d76e00-image.png" />

## Accent Color

Select an accent color

<Image align="center" className="border" border={true} src="https://files.readme.io/baa02fe-image.png" />

## Widget icon

Select an icon for the chat widget

<Image align="center" className="border" border={true} src="https://files.readme.io/529da41-image.png" />

## Widget Position

Select left or right for the widget position on your website's screen

<Image align="center" className="border" border={true} src="https://files.readme.io/e48ce9e-image.png" />

## Widget is Open by Default

Select a setting to open/close the widget by default

<Image align="center" className="border" border={true} src="https://files.readme.io/e8b26b5-image.png" />

<br />

## Don't forget to SAVE your changes!

<Image align="center" className="border" width="70% " border={true} src="https://files.readme.io/129d4b0-image.png" />

<HTMLBlock>{`
<br>
<br>
`}</HTMLBlock>

# Step 3 - Test your bot

**Note: Make sure your Bot has been trained with the question/message you're posting.**

1. Click \[Test bot] from the top left corner of the page to open the \[preview pane]

   <Image align="center" className="border" border={true} src="https://files.readme.io/e4ad906-image.png" />

<br />

2. Enter a question, make sure the answer can be found on all the files and/or links you've uploaded
3. Enter a couple of more questions to thoroughly test your bot's responses.

   <Image align="center" className="border" width="50% " border={true} src="https://files.readme.io/6a5955e-image.png" />

<HTMLBlock>{`
<br>
<br>
`}</HTMLBlock>

# Step 4 - Embed the bot on your website!

1. Click the \[Integrations] tab
2. Select \[Embed on your website], then click \[Javascript]
3. Copy the embed code (click the copy icon to easily copy the code to your clipboard)
4. Paste the code into your website's HTML code where you want to display the chatbot.

<Image align="center" className="border" border={true} src="https://files.readme.io/761dfb2-image.png" />

<br />

<Callout icon="👉" theme="default">
  ### Want to start configuring your Bot?

  Read this step by step guide on [How to Configure Your BOT SETTINGS](https://docs.botsonic.com/docs/how-to-configure-your-bot-settings)
</Callout>