Vanilla JS
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>
- 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");
- After enclosing the key in quotation marks. Make sure that the
name
,email
, anduserId
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>