> For the complete documentation index, see [llms.txt](https://alhena.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alhena.gitbook.io/docs/features/conversational-search/installation.md). # 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