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:
![embed_search_code_settings.png 1811](https://files.readme.io/1521d53-embed_search_code_settings.png)
Copy SearchBlox Embed Search Code reference:
![copy_embed_search_code.png 1534](https://files.readme.io/cae45fa-copy_embed_search_code.png)
Step 2: Configuring Custom Block
-
Log in to your Drupal Website Admin Panel
-
Go to Structure Tab and Click on Block Layout
![drupal_admin_structure_block_layout.png 1662](https://files.readme.io/d49f719-drupal_admin_structure_block_layout.png)
- 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
![drupal_admin_content_place_custom_block.png 1643](https://files.readme.io/682338b-drupal_admin_content_place_custom_block.png)
- 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.
![drupal_admin_configuring_custom_block.png 914](https://files.readme.io/1a84e24-drupal_admin_configuring_custom_block.png)
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
![custom_block_additional_configuration.png 922](https://files.readme.io/a133289-custom_block_additional_configuration.png)
-
Save Block to apply the Changes
-
Once you create and Save the custom block you will see created custom block in the list.
![custom_block_in_content_list.png 1719](https://files.readme.io/504dd44-custom_block_in_content_list.png)
- Scroll down to the bottom of the page and click Save Blocks
![save_all_blocks.png 1687](https://files.readme.io/4cce58b-save_all_blocks.png)
- Go to your site page to check your widget
![embed_search_display.png 1831](https://files.readme.io/07d1e8c-embed_search_display.png)
- Search Results will be displayed in the content area.
![widget_page_results_view.png 1841](https://files.readme.io/3385514-widget_page_results_view.png)
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>
![re-edit_save_custom_block_code.png 1571](https://files.readme.io/75bce86-re-edit_save_custom_block_code.png)
Copied CSS update reference:
![adding_css_to_fix_fixed_position_issue.png 1071](https://files.readme.io/41edfdb-adding_css_to_fix_fixed_position_issue.png)
Note:
- 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"/>
- Ensure you whitelisted your drupal domain with SearchBlox CORS configuration. Reference: Enable CORS
- 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.
Updated over 2 years ago