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.
• 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."

Subtab 2: 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.

Subtab 3: 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://d269dlq2mxc0w4.cloudfront.net/v4/YOUR_DATASET_KEY/embedded.js"></script>

4. Complete Field & Setting Reference