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>
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>
1
Select a location above to see the output here.
You'll need to edit the HTML above to customize this widget.
Change the value of filter-inactive="true" to filter-inactive="false"
Change the value of customer-type="RESIDENTIAL" to customer-type="BUSINESS"
Remove the customer-type attribute from the HTML.
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>
1
<input type=”text” class=”eb-text-field search-field w-input” placeholder=”Enter your address”>
1
2
3
4
5
6
7
8
<img src=”image/icon-location_on-outlined-black.svg” class=”eb-icon-32”>
<div>123 Main St, Dallas, TX - ESID 10443720008527761</div>
</a>
<img src=”image/icon-location_on-outlined-black.svg” class=”eb-icon-32”>
<div>123 Main St, Dallas, TX - ESID 10443720008527761</div>
</a>
<img src=”image/icon-location_on-outlined-black.svg” class=”eb-icon-32”>
<div>123 Main St, Dallas, TX - ESID 10443720008527761</div>
</a>
</div>
Copyright © 2024 EnergyBot • All rights reserved.
1601 Bryan St Suite 900, Dallas, TX 75201