Embed a Search Widget

Add an Address Search Widget to Your Proprietary Website

Embedding an address search widget into your proprietary website consists of two activities containing a total of 4 actions:

1. Copying and pasting a piece of Javascript into the HTML of your proprietary website.
2. Styling the search widget.

• Before You Get Started
  • Your Custom URL must be created before you can embed an Address Search Widget into your proprietary website.

• Best Practice
  • Create a duplicate/test page of the webpage(s) where your CrowdFiber search widget will be publically displayed. This will allow all widget styling and testing to happen behind the scenes with no risk of public view.
  • Once your widget is styled as seen in the steps below, you can then copy and paste the same widget script into the exact line of HTML of your live webpage (all styling will persist/look identical to the widget on your duplicate/test page).

How to Embed an Address Search Widget

1. Log into your Admin Dashboard through your custom CrowdFiber URL.
   It is critical to log into your custom CrowdFiber URL before following any of the steps below. If you do not use the widget script located in the Admin Dashboard associated with your custom CrowdFiber URL you widget will registrants to the incorrect domain.
   
2. Click the Integrations link located in the left-hand rail of your Admin Dashboard.
3. Click the Widgets link located in the Integrations drop-down menu.
4. On the following Integrations Widget page, scroll to the Dynamic Search Widget section.

Part 1) Copy & Paste The Address Search Widget Script

1. Copy the Dynamic Address Search Widget script.

   Do not copy the Legacy Search Widget Script.

2. Paste the script into the HTML markup of your proprietary website. The Address Search Widget will display in the precise location where the script is embedded in your HTML.

Part 2) Style the Address Search Widget

Option 1: Get Assitance From a CrowdFiber Designer

CrowdFiber Designers do not need access to your proprietary website to style your search widget. All CrowdFiber Search Widget styling takes place in your CrowdFiber Admin Dashboard.

• You send an email to CrowdFiber's Customer Success team by sending an email to support@crowdfiber.com.

Include two details in your email:
1. A clear request for assistance styling your CrowdFiber Search Widget.
2. A link to the URL where your CrowdFiber Search Widget is embedded.

Your CrowdFiber Customer Success Representative will let you know when your widget is styled and ready for you to review!

Option 2: Do It Yourself Wiget Styling

• While the default styling of the Address Search Widget is mobile-friendly, you will need to perform some minor style edits to the Address Search Widget’s code to make the Widget fit seamlessly into your website.

The widget is constructed by an open-source CSS framework called Bulma, a framework that is similar to Bootstrap and Foundation.

1. Click the blue Edit Markup button located below the Dynamic Address Search Widget script.
   
   
2. On the following Theme File page, click embed.liquid file to display the code in the blue Edit Markup button located below the Dynamic Address Search Widget Script.
   

• Default Style Management

  • To remove the default styling, delete Line 8 (displayed below).
  • To keep the default styling but reduce the padding, experiment with removing the "section" and "container" classes on Lines 12 and 13.
  • After you edited embed.liquid file, you must click the blue Save button located in the lower left-hand corner of the code editor to apply and display your style adjustments.

• Style Overrides

  • In some cases, you might encounter issues with style overrides; this occurs when Bulma CSS classes overlap or conflict with existing styles on your site.
  • The easiest way to resolve this issue is to remove the Bulma library from the embed.liquid file.
  • Removing the Bulma library will allow the form fields to adopt your existing stylesheet. You will also have the option to manually edit the markup to apply your CSS classes to each field.

• Autocomplete

  • By default, the address search widget will autocomplete addresses as a user types (just like on your CrowdFiber homepage). This default setting helps to ensure high-quality data and reduces errors from typos.
  • In some cases, the autocomplete won't work when embedded onto a page due to the security settings for the page (the site is blocking external requests to the endpoint used for the autocomplete functionality).
  • To resolve this, please contact your website administrator. First, they’ll need to grant access to the URL used by the address search widget code snippet (found under CrowdFiber Admin > Integrations > Widgets > Dynamic Address Search Widget). The URL is contained in quotes in the code snippet.

  Once your site administrator grants access to that URL, autocomplete should work.

Part 3) Edit the Button Color

1. On the Integrations Widgets page, click the blue Edit Variable (Color, Button Label) button located below the Dynamic Address Search Widget Script.

2. On the following Theme Elements page, click the button-color link.

3. Add the preferred hexcode of button color to the Element Color textbox located in the Editing: button-color object.

4. Click the blue Save button located in the bottom left-hand corner of the page to save and apply your button color.

Part 4) Edit the Button Call to Action

To access the CrowdFiber Address Search Widget button’s call to action:

1. On the following Integrations Widgets page, click the blue Edit Variable (Color, Button Label) button located below the Dynamic Address Search Widget Script.

2. On the following Theme Elements page, click submit-button link.

3. Add the preferred call to action to the HTML code editor in the Editing: submit-button object.

4. Click the blue Save button located in the bottom left-hand corner of the page to save and apply your call to action.