Installing Alhena Conversational Search

Alhena Conversational Search is a feature that allows users to search for products on an e-commerce website using natural language. You can use it along with your existing search functionality.

Setup steps overview

Install the Alhena SDK on your website. This is the same SDK you use for our chat widget and product FAQs features.
Insert the conversational search widget on your website.
Insert the Alhena Conversational Search button on your website.

Example of Alhena Conversational Search

1. Install the Alhena SDK on your website

If you are already using the Alhena Chat Widget or Product FAQs features, you can skip this step.

For Shopify stores, we'll automatically install the Alhena SDK for you with you install our Shopify app.

For other sites, insert this snipped just before the closing </body> tag. You can find this snippet in the Alhena dashboard in the Chat Widget settings. Please note, you'll need to replace gleen with your company key, and if your organization is the the EU region, you'll need to use eu instead of app.

<script>
document.gleenConfig = {
    company: "gleen",
    apiBaseUrl: "https://app.alhena.ai",
};
</script>
<script src="https://mason.alhena.ai/sdk/gleenWidget.js"></script>

Insert this snippet just before the closing </body> tag:

<div id="alhena-conversational-search"></div>

Our JavaScript will automatically insert the conversational search widget on your website when this div is present.

Shopify Example:

For this example, we are using the "Craft" theme, as you can see on our example store at https://gleenaidemo.com. Please note, this will vary depending on your theme.

<body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
  ...
  <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
    {{ content_for_layout }}
  </main>

  <!-- insert after the main content -->
  <div id="alhena-conversational-search"></div>
  ...
</body>

3. Insert the Alhena Conversational Search button on your website

For your convenience, our SDK includes predefined button styles that you can use to trigger the conversational search widget. You can use the alhena-conversational-search-button class to apply the default button style. You can add or override any styles on this class if you want to customize the button.

<button class="alhena-conversational-search-button">AI Mode</button>

To open the conversational search widget, you'll need to use our SDK to trigger the widget.

window.gleenWidget.openSearch();

You can also trigger the conversational search widget with a custom button using the openSearch function.

You can optionally pass a user's query to the openSearch function to pre-fill the search input.

window.gleenWidget.openSearch("I'm looking for a new laptop");

Example of passing a query to the openSearch function:

<input id="search-input" type="text" placeholder="Search...">
<button class="alhena-conversational-search-button">AI Mode</button>

document.querySelector('.alhena-conversational-search-button').addEventListener('click', (e) => {
    e.preventDefault()
    const searchInput = document.querySelector('#search-input')
    window.gleenWidget.openSearch(searchInput.value);
    searchInput.value = '';
})

Shopify example:

This is an example of how you can use our SDK to trigger the conversational search widget on Shopify store. Please note, this will vary depending on your theme.

Insert the button in your theme's snippets/header-search-bar.liquid file.

<button class="alhena-conversational-search-button">AI MODE</button>

You can also trigger the conversational search widget with a custom button using the openSearch function as described in step 3. For this example, we are using the "Craft" theme, as you can see on our example store at https://gleenaidemo.com.

<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
    ...
    <div class="field__button alhena-conversational-search-button">AI MODE</div>
</div>
...
</form>

Add the JavaScript to trigger the conversational search widget.

Edit your theme's assets/search-form.js file to add the following code:

class SearchForm extends HTMLElement {
    constructor() {
        ...

        this.alhenaButton = this.querySelector('.alhena-conversational-search-button')
            this.alhenaButton.addEventListener('click', (e) => {
                e.preventDefault()
                window.gleenWidget.openSearch(this.input.value);
                this.input.value = '';
            })
        }
    }
...
}

This code will open the Conversational Search widget when the user clicks the "AI MODE" button, and submit the query the user entered to the search input.

PreviousAdding Search Button To Shopify

Last updated 5 hours ago