​
Embedding Types

There are different types of embedding for the assistant.

​
Chatbot

There are three 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.

To embed the chatbot default button, copy the code snippet and follow the instructions below:

<div id="libraria-chatbot"></div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-chatbot-v0.0.03.js"></script>
<script>
  window.onload = function() {
    window.Libraria.initialize("YOUR_LIBRARY_KEY");
  }
</script>

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

<div id="libraria-chatbot"></div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-chatbot-v0.0.03.js"></script>
<script>
  window.onload = function() {
    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");
  1. 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.

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.

<div><button 
id="libraria-chatbot-button"
style="display: none; position: fixed; bottom: 20px; right: 20px; z-index: 2147483647; cursor: pointer; filter: brightness(1);"
>
<img src="https://libraria.ai/peep-1.svg" style="width: 60px; height: 60px;" /></div>
<div id="libraria-chatbot" data-librariaslug="<YOUR_LIBRARY_NAME>"></div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-chatbot-v0.0.02.js"></script>

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

​
Inline Oracle View

There are two types of views available for the Inline Oracle Embedding.

  • Full View with Avatar

    Provides a comprehensive view of the assistant that spans across a substantial portion of your webpage. It features an avatar of the assistant.

To embed the full view with avatar, use the following code snippet.

<div id="libraria-widget"></div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-v0.0.01.js"></script>
<script>
  window.Libraria.initializeOracle("<YOUR_LIBRARY_KEY>");
</script>

  • Compact View

    Designed to occupy a small portion of your webpage by default. Initially, only the text box for user input is visible.

    When the user sends a message, the view transforms, expanding into a chat box. This expansion provides interactive and user-friendly chat interface for continued interactions with the assistant. 

<div id="libraria-widget"></div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-v0.0.01.js"></script>
<script>
    window.Libraria.initializeOracle("<YOUR_LIBRARY_KEY>");
</script>

​
Chat View

Embed your chatbot inline in your website.

To embed the chat view, use the following code snippet.

The height set for the chat view is 500 pixels. You can change its height by changing the value of the height attribute.

<div id="libraria-chat-widget" data-librariaslug="your_library_name" style="height:500px;"></div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-chat-inline-v.0.0.01.js"></script>

Pop up your assistant via a button.

To embed the popup overlay oracle view, use the following code snippet.

The button’s label by default is “Ask Libraria” but you can change it by replacing the text between <button> </button>.

<button id="libraria-popup" style="cursor: pointer;" data-librariaslug="your_library_name">Ask Libraria</button>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-popup.js"></script>

When the user clicks on the button, a pop-up window featuring the assistant’s interface is shown.

​
Get your Embedding Snippet in Libraria

  1. Copy the code snippet of the embedding you chose in the bottom part of the Embedding Instructions window by clicking the Copy icon.
  2. Paste the code snippet of the embedding you chose in the body of your HTML file to add the assistant in your website.

The code snippets for each embedding type are provided above for your reference. When copying the code, be sure to replace your_library_name with your specific library name.

If you are copying the code from the Embedding Instructions window, there’s no need to make any changes. However, for Chatbot with Default Button and Chatbot with User Options, please follow the additional steps provided in their respective sections.