> ## Documentation Index
> Fetch the complete documentation index at: https://docs.libraria.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Chatbot

> Learn how to embed a chatbot component with Libraria AI.

### Chatbot

When the user clicks on any type of Chatbot button, the same chatbot interface will be shown.

<Frame caption="Chatbot Interface. Button and pop up. It goes in full width on Mobile.">
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/bogpad/images/vanilla-js/embeddings/example-chatbot.png" alt="Chatbot" />
</Frame>

There are 2 types of Chatbot embeddings.

### **Chatbot with Default Button**

Features a small, circular button which is typically located in the bottom right corner of the webpage to access the assistant.

<Frame caption="Chatbot with the Default Libraria Button">
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/bogpad/images/vanilla-js/embeddings/chatbot-default-button.png" alt="Chatbot with the Default Libraria Button" />
</Frame>

```html Chatbot with Default Button Vanilla JS
<div id="libraria-chatbot"></div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-v0.0.01.js"></script>
<script>
  window.Libraria.initialize("YOUR_LIBRARY_KEY");
</script>
```

To embed the chatbot with user options, copy the code snippet and follow the instructions below:

```html Chatbot with Default Button and user options Vanilla JS
<div id="libraria-chatbot"></div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-v0.0.01.js"></script>
<script>
  window.Libraria.initialize("YOUR_LIBRARY_KEY", {
    name: current_user_name, // Full name
    email: current_user_email, // Email address
    userId: current_user_id // currentUserId
  });
</script>
```

1. The `key` is used used for authenticating and accessing the assistant. Add quotation marks around the key when you paste it.

```bash
window.Libraria.initialize("YOUR_LIBRARY_KEY");
```

2. After enclosing the key in quotation marks. Make sure that the `name`, `email`, and `userId` must be filled with the actual user information they represent.

```bash
{
  name: "user_name", // Full name
  email: "user_email", // Email address
  userId: "user_id" // currentUserId
}
```

### **Chatbot with Custom Styled Button**

Provides you with the flexibility to customize the appearance of the button used to access the chatbot.

<Frame caption="Chatbot with Custom Styled Button">
  <img src="https://mintlify.s3-us-west-1.amazonaws.com/bogpad/images/vanilla-js/embeddings/chatbot-custom-style.png" alt="Chatbot with Custom Styled Button" />
</Frame>

To embed the chatbot custom styled button, use the following code snippet.

You can change the image of the button by replacing the link in the `src` attribute of the `<img>` tag. You can also customize its size by changing the values of the `width` and `height` attributes.

```html Chatbot with Custom Styled Button Vanilla JS
<div id="libraria-chatbot-button">
  <img src="https://libraria.ai/peep-1.svg" style="width: 60px; height: 60px;" />
</div>
<div id="libraria-chatbot"></div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-v0.0.01.js"></script>
<script>
  window.Libraria.initialize("YOUR_LIBRARY_KEY");
</script>
```