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:



  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=""/>`

  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.