Integrating SearchBlox Widget with Drupal Site

It is possible to integrate SearchBlox widget with Drupal Site Pages using the following steps:

Step 1: Copy Widget/Embed Search Code

Select required widget settings and copy the Widget a.k.a Embed Search Code from your SearchBlox Admin Console > Embed Search screen
Reference: Embed Search Configuration

Selecting required widget settings and generating SearchBlox Embed Search Code reference:

Copy SearchBlox Embed Search Code reference:

Step 2: Configuring Custom Block

• Log in to your Drupal Website Admin Panel

• Go to Structure Tab and Click on Block Layout

• Choose any section to integrate your widget code with a custom block. For Eg: Let's choose a Content block and click on Place Block

• Enter the name of the block and Convert the page to Full HTML content to paste your copied widget code into Source for Initial HTML view. Click Save.

Step 3: Integrating Custom Block with Site Page(s)

• Uncheck the Display Title of your custom block and Check the required pages under Content Types Tab where you want to display the widget

• Save Block to apply the Changes

• Once you create and Save the custom block you will see created custom block in the list.

• Scroll down to the bottom of the page and click Save Blocks

• Go to your site page to check your widget

• Search Results will be displayed in the content area.

Embed Code Updates

If any changes in widget code, you can easily customize by editing your custom block. Here is an example:
Sometimes existing drupal site page may cause CSS overriding issues. To fix this issue please add this below CSS style tag to your custom block:
<style type="text/css">.login-firstbar {position:relative !important} #root a {border:none !important }</style>

Copied CSS update reference:

📘

Note:

1. Configure sb_plugin_domain in your custom UI configuration file facet.js or using input tag below:
   <input type="hidden" id="sb_plugin_domain" value="https://searchblox.domain.com"/>
2. Ensure you whitelisted your drupal domain with SearchBlox CORS configuration. Reference: Enable CORS
3. Make sure you apply a valid SSL certificate for your SearchBlox Application for secure access. Reference: SearchBlox SSL Setup

Please contact SearchBlox Support for any further help.