Search

Learn how to embed a Search component on your website.

Search

When any type of search bar is clicked, a modal which occupies a small portion of the page will pop up and the user will be able to send a message.

When you message the assistant, the view changes to a chat box, which gives you a more interactive and user-friendly way to talk to the assistant.

There are two types of Search bars.

• Search Bar

Search Bar

To embed this search bar, copy the code snippet and follow the instructions below:

Search Bar

<div id="libraria-search" cursor="pointer"
    style="background: white; display: flex; align-items: center; border: 1px solid #afafaf; border-radius: 4px; padding: 5px; font-family: inherit; margin-right: 50px;">
    <input readonly type="text" placeholder="Search"
        style="border: none; flex-grow: 1; text-decoration: none; outline: none; cursor: pointer">
    <span
        style="border-radius: 4px; border: 1px solid #afafaf; color: #afafaf; font-size: 12px; padding: 2px 5px; margin-right: 5px; text-decoration: none; outline: none;">⌘
        K</span>
    </div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-v0.0.01.js"></script>
<script>
     window.Libraria.initializeSearch("<YOUR_LIBRARY_KEY>");
</script>

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

Search Bar with User Options

<div id="libraria-search" cursor="pointer"
    style="background: white; display: flex; align-items: center; border: 1px solid #afafaf; border-radius: 4px; padding: 5px; font-family: inherit; margin-right: 50px;">
    <input readonly type="text" placeholder="Search"
        style="border: none; flex-grow: 1; text-decoration: none; outline: none; cursor: pointer">
    <span
        style="border-radius: 4px; border: 1px solid #afafaf; color: #afafaf; font-size: 12px; padding: 2px 5px; margin-right: 5px; text-decoration: none; outline: none;">⌘
        K</span>
    </div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-v0.0.01.js"></script>
<script>
    window.Libraria.initializeSearch("<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
}

• Search Bar with Icon

Search Bar with Icon

To embed the search bar with icon, use the following code snippet:

Search Bar with Icon

<div class="search-bar-container">
  <input type="text" id="libraria-search" class="search-bar" placeholder="Search" data-librariaslug="firstlib">
</div>
<script src="https://libraria-prod.s3.us-west-1.amazonaws.com/public/embed-v0.0.01.js"></script>
<script>
	window.Libraria.initializeSearch("<YOUR_LIBRARY_KEY>");
</script>