# Installation Add Conversational Search to your website in three steps: install the Alhena SDK, add the search container, and trigger it from a button. ## Prerequisites * An active Alhena AI account * Access to your website's HTML or theme editor * Your company key (found in your dashboard URL — e.g., if your dashboard is `https://app.alhena.ai/dashboard/acme/`, your company key is `acme`) ## Step 1: Install the Alhena SDK If you already have the Alhena Chat Widget or Product FAQs installed, you can skip this step — Conversational Search uses the same SDK. Add the following code just before the closing `` tag of your website: ```html ``` {% hint style="info" %} Replace `YOUR_COMPANY_KEY` with your actual company key. For EU region accounts, use `https://eu.alhena.ai` instead of `https://app.alhena.ai`. {% endhint %} **For Shopify stores:** The SDK is automatically installed when you add the Alhena Shopify app. No manual setup is needed. You can also find your pre-configured snippet in the Alhena dashboard under **Integrations > Conversational Search > Installation**.

Installation tab in the Conversational Search settings

## Step 2: Add the Conversational Search Container Insert the following HTML element where you want the Conversational Search to render on your page. This is typically placed just before the closing `` tag: ```html

``` The Alhena SDK automatically detects this element and initializes the Conversational Search interface. ### Shopify Example For Shopify stores, add the container in your theme's `theme.liquid` file, after the main content: ```html ...

... ``` {% hint style="warning" %} The exact placement may vary depending on your Shopify theme. The example above uses the "Craft" theme structure. {% endhint %} ## Step 3: Trigger Conversational Search You have several options for opening Conversational Search from your website. ### Option A: Open with a Custom Button Use `gleenWidget.openSearch()` to open Conversational Search when a button is clicked: ```html ``` You can also pass a query to pre-fill the search input: ```javascript gleenWidget.openSearch("I'm looking for a moisturizer for dry skin"); ``` ### Option B: Toggle with a Custom Button Use `gleenWidget.toggleSearch()` to open or close Conversational Search: ```html ``` ### Option C: Connect to an Existing Search Bar A common pattern is to add an "AI Mode" button next to your existing search input that passes the user's query to Conversational Search. The SDK includes a predefined button style that you can use. Apply the `alhena-conversational-search-button` class to get the default button styling. You can add or override any styles on this class to customize the button. ```html ``` ```javascript function openAISearch() { const searchInput = document.querySelector('#search-input'); gleenWidget.openSearch(searchInput.value); searchInput.value = ''; } ``` ### Option D: Close Conversational Search Programmatically ```javascript gleenWidget.closeSearch(); ``` ## Shopify Integration Example For Shopify stores, here's how to add an "AI Mode" button to your search bar: **1. Add the button in `snippets/header-search-bar.liquid`:** ```html ``` **2. Add the JavaScript in `assets/search-form.js`:** ```javascript 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 = ''; }); } } ``` ## JavaScript SDK Reference | Method | Description | | --------------------------------- | ------------------------------------------------------------ | | `gleenWidget.openSearch()` | Opens the Conversational Search overlay | | `gleenWidget.openSearch(query)` | Opens Conversational Search and submits the given query | | `gleenWidget.closeSearch()` | Closes the Conversational Search overlay | | `gleenWidget.toggleSearch()` | Toggles Conversational Search open or closed | | `gleenWidget.toggleSearch(query)` | Toggles Conversational Search; if opening, submits the query | ## Verifying Your Installation After adding the code to your website: 1. Open your website in a browser. 2. Click the button you configured to open Conversational Search. 3. The Conversational Search overlay should appear with a heading, input field, and starter questions. 4. Type a question and verify you receive an AI-powered response. If Conversational Search doesn't appear, check the browser console for errors and verify your company key is correct. ## Next Steps * [Customize the appearance](/docs/features/conversational-search/customization.md) of your Conversational Search start page and chat widget * Configure [starter questions](/docs/ai-configuration/tuning/adding-faqs.md) to guide your customers * Set up [product recommendations](/docs/features/chat-widget/product-recommendations.md) to surface relevant products --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://alhena.gitbook.io/docs/features/conversational-search/installation.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.