Product Selector

Fusion 5.9
    Fusion 5.9

    Install a Springboard embed

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

    This article teaches you how to install Springboard embeds in your frontend search interface. Before you begin, get your search application ready. Once complete, you’re ready to install and customize.

    Install the embed

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

    2. From the Embeds tab, click the toggle to turn your application from Private to Public. An Allowed origins field and the embed code appears.

      The embed-token value used by this embed is generated when the Private toggle is switched 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.

    3. In the Allowed origins field, add the domains where you want to use the embed.

    4. Locate the embed you want to install.

    5. Click Copy to copy the embed script. Paste it in the <head> of your HTML file.

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

    7. Build your site. The embed is visible where you placed it in your site.

    8. Customize, test, and launch.

    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.

    Customize the embed

    If you want to customize the embed to match your company style guidelines or for another use case, you can create custom CSS rules. Follow the instructions below:

    1. In the <head> of your HTML file, locate the embed code snippet.

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

    2. Add a <link> to your custom style sheet below the embed 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">
      Be sure to place the custom style sheet below the embed script. By doing so, your custom rules take precedence over the default rules.

    3. Replace the placeholder URL, CUSTOM_STYLESHEET_SRC, with the path to your custom style sheet.

    You’re now ready to create custom CSS rules for the embed.