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.

Chatbot Interface. Button and pop up. It goes in full width on Mobile.

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.

Chatbot with the Default Libraria Button

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:

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.

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.

{
  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.

Chatbot with Custom Styled Button

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.

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>