< Back to Widgets

Account Number Lookup

How to use:

Copy the HTML code below and place it wherever you need on your site.

1
2
3
4
5
6
7
8
9

<div data-eb-component="eb-esid-search"
 id="address-search"
  filter-inactive="true"
  customer-type="RESIDENTIAL"
  notify-parent="true"
  ref="DEMO"
  >
</div>
<script src="https://www.energybot.com/eb-webcomponents/v1/component-loader.js"></script>

You'll need this as well:

Copy the script below and place it inside the <head> tag of your website to handle the address selection event.

1
2
3
4
5
6
7
8
9
10
11
12
13

<script>
 window.addEventListener('message', (event) => {
   if (event && event.data) {
     const data = JSON.parse(event.data);
     if (data.channel === 'eb-esid-search' && data.type === 'address-entered') {
       document.getElementById('address-search').style.height = '900px';
     } else if (data.channel === 'eb-esid-search' && data.type === 'address-selected') {
       document.getElementById('address-search').style.height = '100px';
        // Your code to handle event here.
     }
   }
 }, false);
</script>

Preview:

Output:

1

Select a location above to see the output here.

Customize this widget:

You'll need to edit the HTML above to customize this widget.

Include inactive meters in the search results:

Change the value of filter-inactive="true" to filter-inactive="false"

Show ONLY business meters in the search results:

Change the value of customer-type="RESIDENTIAL" to customer-type="BUSINESS"

Show BOTH business AND residential meters in the search results:

Remove the customer-type attribute from the HTML.

Edit styles / change to dark mode:

You’ll need to recreate our styles on your website using the exact same class names.

Once complete, add a link to your CSS file in the HTML code above.

It should look something like this:

1
2
3
4
5
6
7
8
9
10

<div data-eb-component="eb-esid-search"
 eb-stylesheet="http://link-to-your-css-file.com.css"
 id="address-search"
  filter-inactive="true"
  customer-type="RESIDENTIAL"
  notify-parent="true"
  ref="DEMO"
  >
</div>
<script src="https://www.energybot.com/eb-webcomponents/v1/component-loader.js"></script>

Styles for Address Search Input:

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

1

<input type=”text” class=”eb-text-field search-field w-input” placeholder=”Enter your address”>