Turn Shoppers' Search Intent into AI Conversations with the "Ask Our AI" Search Widget

Overview

The "Ask Our AI" Search Widget places a visible, branded search bar directly on your website pages. When shoppers type a question or product search and hit Enter, Rep AI chat opens instantly with their query already submitted — turning passive browsing into a guided shopping conversation.

Unlike the JavaScript-based search bar integration (which requires developer setup), this widget is fully managed by Rep AI. You configure it through your Console — no coding required.

What This Feature Does

The "Ask Our AI" Search Widget provides an embedded search bar that you place anywhere on your site using a simple container ID. It:

• Displays a branded search bar with your placeholder text

• Opens Rep AI chat on submit with the shopper's query already sent

• Works independently from your website's native search — it's a standalone Rep AI element

• Stays visually isolated from your theme's CSS, so it looks consistent across any store design

Why Use the Search Widget?

Capture high-intent moments: Shoppers who search are ready to buy. This widget intercepts that intent and connects them with your AI assistant immediately.

No developer needed: Unlike the JavaScript-based search integration, the "Ask Our AI" widget is configured entirely through your Rep AI Console.

Better product discovery: Instead of browsing search results pages alone, shoppers get an AI-powered conversation that understands what they're looking for and guides them to the right product.

Higher conversions: Sessions where shoppers engage with the search widget and chat with your AI are more likely to convert into purchases.

Setting Up the "Ask Our AI" Search Widget

Step 1: Access the Console Settings

1. Log in to your Rep AI Console

2. Navigate to Settings in the left sidebar

3. Select Chat widget from the dropdown menu

Step 2: Enable the Widget

1. Find the "Ask Our AI" Search Widget section

2. Toggle the feature ON

3. You'll see configuration fields appear

Step 3: Configure Your Widget

You can customize the following settings:

Placeholder text: The hint text shown inside the search bar before a shopper types.

Recommended placeholders: - "Ask me anything about our products..." - "What are you looking for today?" - "Search for products, sizing, or anything else..."

Container ID: The HTML element ID where the widget will appear on your page. This works the same way as the Inline PDP Widget — you provide an element ID from your theme, and Rep AI renders the search bar inside it.

Step 4: Set Your Container ID

The Container ID tells Rep AI where to place the search widget on your page.

How to find a Container ID:

1. Open the page where you want the widget to appear in your web browser

2. Right-click near the location where you'd like the search bar displayed

3. Select Inspect or Inspect Element

4. In the developer tools, look for HTML elements with an id="" attribute

5. Copy the ID value (without quotes or the # symbol)

Example: If you see <div id="search-section">, your container ID would be search-section

Suggested placement locations: - Homepage hero area — high visibility, catches shoppers right when they arrive - Collection page headers — perfect for product browsing pages - Above product grids — shoppers can ask before scrolling through results - Landing page sections — great for campaign or promotional pages

Important: If the container ID doesn't exist on a given page, the widget simply won't appear — it will never cause errors or break your site.

Step 5: Save and Test

1. Click Save to apply your changes

2. Visit the page where you placed the widget

3. Verify the search bar appears in the correct location

4. Type a test query and press Enter or click the submit button

5. Confirm that Rep AI chat opens with your query submitted

6. Check that the AI responds with relevant product recommendations

How the Widget Works for Shoppers

1. A shopper sees the "Ask Our AI" search bar on your page

2. They type their question or product search (e.g., "waterproof jacket under $100")

3. They press Enter or click the Ask button

4. Rep AI chat opens immediately

5. Their query is sent as a message to your AI assistant

6. The AI responds with personalized recommendations or follow-up questions

7. The conversation continues naturally from there

Privacy and consent: If a shopper hasn't accepted your privacy consent yet, the widget holds the query until consent is given, then sends it automatically. No messages are lost.

Rapid typing: If a shopper quickly submits multiple queries, the widget automatically sends only the most recent one. This prevents message spam and ensures a clean conversation start.

Use Cases

Fashion and Apparel: A shopper types "summer dresses for a beach wedding" — Rep AI opens and asks about their size, color preferences, and budget before recommending perfect options.

Beauty and Skincare: A shopper searches "moisturizer for sensitive skin" — Rep AI asks about their skin concerns and routine, then suggests products with the right ingredients.

Home and Furniture: A shopper types "small apartment sofa" — Rep AI inquires about dimensions, style preferences, and material before showing matching options.

Electronics: A shopper searches "noise-cancelling headphones for travel" — Rep AI asks about their budget, preferred brand, and whether they want over-ear or in-ear.

"Ask Our AI" Widget vs. Search Bar Integration

Rep AI offers two ways to connect search behavior with AI chat:

Both features can be used together or independently.

Troubleshooting

The search widget doesn't appear

Possible causes: - The feature toggle is OFF — verify it's enabled in your Console settings - The container ID doesn't exist on the page — use your browser's Inspect tool to double-check - The container ID is misspelled — ensure exact spelling, including capitalization and hyphens

Solution: Use your browser's developer tools (right-click then Inspect) to verify the container with your specified ID exists on the page.

The widget appears in the wrong location

Possible causes: - The container ID points to a different element than expected - Your page has multiple elements with the same ID

Solution: Inspect the page to confirm where the container ID is located, and try a different ID if needed.

Chat doesn't open after submitting a query

Possible causes: - Rep AI may still be loading on the page - There might be a browser extension blocking the chat

Solution: Wait a moment for Rep AI to fully load, then try again. If the problem persists, try in an incognito or private browsing window to rule out browser extension conflicts.

The widget shows on desktop but not mobile (or vice versa)

Possible causes: - Your theme uses different HTML structures for desktop and mobile - The container ID exists on one layout but not the other

Solution: Inspect your page on both desktop and mobile to verify the container ID exists in both templates. You may need a container ID that is present in both views.

Need Help?

If you need assistance setting up the "Ask Our AI" Search Widget or finding the right container ID for your theme:

• Contact our support team through your Rep AI Console

• Use the Rep AI Helper chat widget for instant guidance

• Book a consultation with our team (available for eligible plans)