> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperleap.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Create Your First Chatbot
> A Comprehensive Guide to Creating and Configuring AI Chatbots
## Prerequisites
Before creating Chatbots, ensure you have:
* Access to [Studio](https://studio.hyperleapai.com)
* An active Chatbot subscription
* Website access for deployment
You have to [whitelist](https://studio.hyperleapai.com/manage-organization)
the domain of your website in the organization settings to use the chatbot.
Follow these steps to create and configure a Chatbot:
Navigate to the website-chatbots page in Studio and click "Create New Chatbot".
Configure your chatbot's content across different screens:
Select a Screen and configure its content
Set up your chatbot's AI behavior and responses:
Quick-start with tested behavior templates that you can customize:
After importing, you can customize all configuration options below:
Choose the AI model that best fits your use case:
Connect your knowledge sources:
* Upload documents, website URLs, or text content
To learn more about sources, check out the [Sources](/guides/sources) guide.
Fine-tune your chatbot settings:
* Temperature, Max tokens, Response length, Memory handling, Context window
Build your behavior from scratch with complete control:
Configure your own custom behavior:
Choose the AI model that best fits your use case:
Connect your knowledge sources:
* Upload documents, website URLs, or text content
To learn more about sources, check out the [Sources](/guides/sources) guide.
Fine-tune your chatbot settings:
* Temperature, Max tokens, Response length, Memory handling, Context window
Customize your chatbot's appearance:
Quick-start with pre-built style templates:
Start with our professionally designed templates:
After importing, you can customize all styling options below:
Fine-tune the imported template:
* Global styling
* Lead form styling
* Conversation styling
* Chatbot button styling
Build your style from scratch with complete control:
Design every aspect of your chatbot:
* Global styling
* Lead form styling
* Conversation styling
* Chatbot button styling
You have the option to enable or disable branding for your chatbot.
Edit the chatbot settings:
* Enable or disable the chatbot on mobile and desktop
* Require Login to chat
* Manage lead capture settings
* AutoOpen chatbot on mobile and desktop with a delay
Add your chatbot to your website:
* Publish your chatbot to enable integration.
Users on the Free plan cannot integrate the chatbot. Please upgrade your plan to enable these features.
Place this code in the `` tag of your website.
### Asset Types
Your chatbot can share various types of assets with users:
PDFs, Word docs, spreadsheets, and other documents
Product photos, diagrams, screenshots, and graphics
External links to landing pages, documentation, or resources
YouTube and Vimeo video links that play in an embedded player
Cal.com or Calendly booking links for scheduling meetings
### Programmatic Control
You can control the chatbot from your website using custom buttons or links:
Add the `data-aichatbot-invoke` attribute to any HTML element:
```html theme={null}
Chat with us
Need Help?
```
Elements with this attribute are automatically bound when the chatbot loads. No additional JavaScript required!
Use the global `HyperleapChatbot` API for custom control:
```javascript theme={null}
// Open the chatbot
window.HyperleapChatbot.open();
// Close the chatbot
window.HyperleapChatbot.close();
// Toggle the chatbot
window.HyperleapChatbot.toggle();
```
Example usage with custom button:
```html theme={null}
```
**Features:**
* Works with any HTML element (buttons, anchors, divs, etc.)
* Supports dynamically added elements
* Automatically prevents default actions on links
* No duplicate event listeners
* Preview on multiple devices
* Share chatbot preview - Share this link with your customers to let them preview your chatbot.
Users on the Free plan can create up to 1 chatbot. Upgrade your plan to create
more chatbots and access additional features.
## Next Steps
Back to Chatbots overview
After importing, you can customize all configuration options below:
After importing, you can customize all styling options below:
Place this code in the `` tag of your website.
### Asset Types
Your chatbot can share various types of assets with users:
