Embedded Search & Results Page Builder

The Embedded Search Builder allows you to embed a full-featured, AI-powered search form and dynamic results page directly into any standard page on your website (e.g. /search, /kb, or /support).

1. Features & Capabilities

• Dedicated In-Page Search Form: Renders a search input field and submit button directly inside your page layout.
• Rich Result Cards: Displays product titles, AI-generated search excerpts, product prices, thumbnail images, and clickable "View Resource" action links.
• URL Parameter Capture: Automatically reads incoming search keywords from URL query parameters (e.g. https://yoursite.com/search-results?s=wireless+headphones), performing the search immediately when the page loads.
• Dynamic "Load More" Pagination: Seamlessly loads subsequent batches of results without reloading the entire web page.
• Embedded Live Search: Optionally attaches instant autocomplete dropdown suggestions directly to the embedded search bar.
• Search Results Memory: Remembers the visitor's last query and results using localStorage. When a user clicks a result and then presses the browser Back button, results are instantly restored — no API call needed.
• Multi-Language Support: Translates all search headings, button labels, and error messages to match the visitor's language.

2. Customizing Embedded Search

Navigate to the Embedded Search section (section=embeddedsearch) on your dashboard.

Subtab 1: Search Settings & Results Display

┌─────────────────────────────────────────────────────────────────────────────┐
│  Target Container Class:       "sbpro-embedded-container"                   │
│  Incoming Keyword URL Param:   "s"                                          │
│  Results Header Label:         "Search Results for: "                       │
│  Results Per Page:             10                                           │
│  Max Total Results:            50                                           │
│  Results "More Info" Link:     "View Resource"                              │
│  Results "Price" Label:        "Price: "                                    │
│  "Show More Results" Button:   "Load More Results"                          │
└─────────────────────────────────────────────────────────────────────────────┘

1. Target Container Class: The CSS class name of the <div> where the embedded search component will render on your page (default sbpro-embedded-container).
2. Current Search Field "Name" (Incoming Query): The URL query string parameter used by your site when visitors submit a search form (e.g. s for ?s=keyword on WordPress, or q for ?q=keyword on Shopify).
3. Show/Hide Search Field: Choose whether to render the search input box on the page or only display the results list (useful if your page already has a custom search bar).
4. Search Placeholder & Submit Label: Customize the input placeholder text (e.g. "Search knowledge base...") and submit button label (e.g. "Search").
5. Results Header Label: Prefix shown above the results list (e.g. "Search Results for: " + visitor query).
6. Results Per Page & Max Limit: Control how many result cards display initially (e.g. 10) and the maximum total records returned (e.g. 50).
7. Results "More Info" & "Price" Labels:
   • More Info Link: Text on the button linking to the product or article (e.g. "View Resource" or "Buy Now").
   • Price Label: Text prefix shown before prices (e.g. "Price: " or "MSRP: ").
8. Thumbnail Images in Search Results:
   • Toggle On/Off: Enable to display product thumbnails on each card.
   • Custom Placeholder: Upload an alternate fallback image if a product doesn't have a photo.
9. Error & Status Messages: Customize the text for "Please enter at least 3 characters" and "No results found matching your search query."

2: Search Results Memory (Back-Button Persistence)

How It Works

After every successful search, the widget saves the following to the visitor's browser localStorage, namespaced to your specific dataset so multiple embedded search instances never conflict:

Restore Logic & Priority Rules

On every page load, the widget checks for a URL search parameter first. Memory is only restored when no URL query is present:

Page loads
    │
    ├─ URL param present? (e.g. ?s=shoes)
    │       └─► YES: Run fresh search. Clear any saved memory state.
    │
    └─ No URL param (e.g. Back button navigation)
            ├─► Memory exists & within 30-min TTL?
            │       └─► YES: Restore query + results + scroll instantly (0 API calls)
            └─► Memory expired or empty → Show blank search form

When Memory Is Automatically Cleared

• The visitor types a new search query and clicks Search or presses Enter.
• The 30-minute TTL has elapsed since the last search.
• The page is loaded with an explicit URL query parameter (e.g. ?s=shoes).

Enabling or Disabling Memory

The toggle is located in the Embedded Search Builder dashboard under Results Display & Pagination Settings → 🧠 Search Results Memory (Back-Button Persistence). It is Enabled by default for all datasets. To disable it, set the dropdown to Disabled and save — the widget will revert to standard stateless behavior.

CSS Stylesheets & Classes

Visperity automatically compiles clean CSS classes for the embedded search form, buttons, and result cards:

• .sbpro-embedded-container: The outer container.
• .sbpro-results-list-item: Individual result cards.
• .sbpro-results-list-title: Product and article titles.
• .sbpro-results-list-price: Product price badges.
• .sbpro-results-list-excerpt: AI summary text.
• .sbpro-results-more-info: The action link button.

You can add custom CSS rules directly in the Custom CSS box to customize borders, fonts, or shadows.

Multi-Language Translations

1. Select a secondary language from the dropdown (e.g. 🇫🇷 French).
2. Click ✨ AI Auto-Translate to automatically translate all form placeholders, search headings, error messages, and price labels.
3. Click 💾 Save Translations.

3. Installing on Your Website

Installing Embedded Search requires placing a target <div> on your page and including the JavaScript embed tag:

1. In your CMS or HTML page template (e.g. on your /search-results or /help page), add the container <div>:

<!-- Container where search form and results will appear -->
<div class="sbpro-embedded-container"></div>

2. Add the Visperity Embedded Search <script> tag right before the closing </body> tag:

<!-- Visperity Embedded Search Embed -->
<script async src="https://d14dcur0qzt04d.cloudfront.net/v4/YOUR_DATASET_KEY/embedded.js"></script>

4. Complete Field & Setting Reference