Product Selector

Fusion 5.9
    Fusion 5.9

    Embeds

    Springboard embeds are drop-and-go search UI components that help you build your frontend search interface. Embeds are preconfigured and production-ready.

    All you need to do is install the embed and maintain it over time. You also have the option to create custom styles. Lucidworks handles the rest.

    You Lucidworks

    Install and maintain

    ✅

    ✘

    Add custom styles (optional)

    ✅

    ✘

    Write API calls

    ✘

    ✅

    Perform API updates

    ✘

    ✅

    Secure and protect

    ✘

    ✅

    Collect signals

    ✘

    ✅
    Embed components are optimized for a desktop browsing experience.

    Installation

    Before you begin, prepare your search application. Once complete, you’re ready to install an embed:

    1. Click the Integrations icon from the Applications UI sidebar.

    2. From the Embeds tab, click the toggle to make your application Public.

    3. Add your domains to the Allowed origins field.

    4. Click Copy to copy the embed script and style sheet. Paste it in the <head> of your HTML file.

    5. Click Copy to copy the embed object code. Paste it in the <body> of your HTML file.

    6. Customize, test, and launch.

    For detailed installation instructions, see Install a Springboard embed.

    Can I use embed tokens to connect to multiple Springboard applications on the same site?

    No, your site can only connect to one Springboard application at a time with embed tokens.

    This also applies to subdomains of your site. If your site, example.com, uses embeds with your Springboard application, you can’t connect internal.example.com to a different Springboard application using embed tokens.

    Available embeds

    Searchahead

    The searchahead embed displays search results as you type. The searchahead embed starts showing results after entering three or more characters.

    <lw-searchahead></lw-searchahead>

    Search results

    The search results embed displays the result returned by your application. Result cards include the title, description, and URL of the result. Sort options include relevance, modification date, and publication date.

    <lw-results></lw-results>

    Facets

    The facets embed filters the results generated by the search results embed. The available facet options are pre-populated in the embed. To filter the results, click a facet.

    <lw-facets></lw-facets>

    The breadcrumbs embed displays the facets currently used to filter search results. To clear a breadcrumb and remove the facet from your results, click the X next to the facet.

    <lw-breadcrumbs></lw-breadcrumbs>

    Components

    Script

    All that’s required for embeds are the script and HTML object. You have the option to customize the embed with CSS.

    This is an example embed script, located in the <head> of your HTML file:

    <script type="module" 
    id="lw-ui-lib"
    api-url="https://APPLICATION_ID.applications.lucidworks.com/" 
    embed-token="EMBED_TOKEN" 
    src="SCRIPT_SRC"></script>

    The following values come preconfigured by Springboard:

    • APPLICATION_ID. A unique value that identifies your application in Springboard. To obtain the value, click the Integrations icon from the Applications UI sidebar and then click the APIs tab. The value is in the Application ID field.

    • EMBED_TOKEN. An access token that grants your site authenticated access to your Springboard application.

      The EMBED_TOKEN is generated when you switch the Private toggle to Public. If you switch back to Private, the token is deleted. Switching the toggle to Public again creates a new authentication token, and your embed snippet must be replaced.

    • SCRIPT_SRC. The script that powers the basic capability of the embed. Lucidworks updates and maintains this file.

    The Springboard embed script includes one optional boolean field, deep-linking. Deep linking saves the search state in the URL so you can view the same results later with the same URL. Set deep-linking = true in the embed script to enable direct linking to the URL containing a search term. You can deactivate deep linking or customize deep linking fields within each embed’s configuration options. You do not need to use the deep-linking field if you do not use the deep linking feature.

    Deep linking is not supported for embeds used within iframes.

    If you’re customizing the embed, you can link a style sheet below the script.

    <script type="module" 
    id="lw-ui-lib"
    api-url="https://APPLICATION_ID.applications.lucidworks.com/" 
    embed-token="EMBED_TOKEN" 
    src="SCRIPT_SRC"></script>
<!-- Custom style sheet below... -->
<link rel="stylesheet" href="CUSTOM_STYLESHEET_SRC">

    HTML object

    This is an example embed HTML object, located in the <body> of your HTML file:

    <lw-searchahead></lw-searchahead>

    You can combine embed HTML objects to create a complete search application:

    <body>
  <div class="header">
    <lw-searchahead></lw-searchahead>
    <lw-breadcrumbs></lw-breadcrumbs>
  </div>
  <div class="content">
    <lw-facets></lw-facets>
    <lw-results></lw-results>
  </div>
</body>

    Configuration

    Springboard embeds can be configured to meet the needs of your search integration. Simply include the configuration option and value in the HTML object.

    For example, the search results embed can be configured to only return results with the tag news. To do this, add the filter configuration option to target the tag:

    <lw-results
    filter="tag:news"
></lw-results>

    Visit your embed configuration page for full configuration options.