Discovery Widget
The Discovery Widget is an optional part of Lead Capture AI provided as an easy-to-use call to action for launching the Lead Capture Experience. We offer the following options:
You may include as many of the widget options into your website as you'd like.
Font Customization
All of the options share the same font customization. This can be controlled by adding the data-font property to the <script> tag. The value of the property should be set to a Google Fonts font name. The font will be used for all text within the widget.
<script data-font="Audiowide"></script>
Floating Bar
The Floating Bar can be added to the page by adding the data-floating-bar property to the script tag:
<script data-floating-bar=""></script>
By default this will add the floating bar to your page and position it at the top of your website. It will be dismissible and look like:
Customizations
It is customizable via additional properties that can be provided as the value to the data-floating-bar property. The properties and values should be added in the form of property=value. Each property and value pair should be separated by a pipe(|).
| property | description | Allowed Values | Default |
|---|---|---|---|
| position | Location of the floating bar | top, bottom | top |
| dismissible | If the close button should be shown | true, false | true |
| text | Displayed text | text of 35 characters or less | See a 3D model of your solar home |
| textColor | Color of the text | color name or hex | black |
| textHoverColor | Used in place of the textColor when the cursor is over the floating bar | color name or hex | black at 70% opacity |
| textClickColor | Used in place of the textColor when the floating bar is clicked | color name or hex | black at 60% opacity |
| backgroundColor | Background color of the bar | color name or hex | white |
| backgroundHoverColor | Used in place of the backgroundColor when the cursor is over the floating bar | color name or hex | white |
| backgroundClickColor | Used in place of the backgroundColor when the floating bar is clicked | color name or hex | white |
| closeButtonTextColor | Color of the X icon | color name or hex | black |
| closeButtonTextHoverColor | Used in place of the closeButtonColor when the cursor is over the X | color name or hex | black at 70% opacity |
| closeButtonTextClickColor | Used in place of the closeButtonColor when the X is clicked | color name or hex | black at 60% opacity |
Example
<script
id="auroraLCAI"
data-floating-bar="position=top|dismissible=true|textColor=blue|text=Your custom text"
data-font="Audiowide"
data-org-id="your-organization-id"
src="https://leads.aurorasolar.com/lead-capture-sdk-v1.js"
type="text/javascript"
></script>
Page Section
The Page Section can be added to the page by adding the data-page-section property to the script tag:
<script data-page-section=""></script>
In addition to the script tag property, we also need to know where in your page to add it. Do this by adding the following DOM element to your page:
<div id="lcaiPageSection"></div>
It is responsive by design and will look like:
Larger screens
Tablet and Phone
Customizations
It is customizable via additional properties that can be provided as the value to the data-page-section property. The properties and values should be added in the form of property=value. Each property and value pair should be separated by a pipe(|).
| property | description | Allowed Values | Default |
|---|---|---|---|
| backgroundColor | Background color of the page section | color name or hex | white |
| buttonColor | Background color of the button | color name or hex | black |
| buttonText | Text of the button | text of 35 characters or less | Get Started |
| buttonTextColor | Text color of the button | color name or hex | white |
| buttonTextHoverColor | Used in place of the buttonTextColor when the cursor is over the button | color name or hex | white at 70% opacity |
| buttonTextClickColor | Used in place of the buttonTextColor when the button is clicked | color name or hex | white at 60% opacity |
| headingText | Heading text | text | See how solar looks on your home |
| headingTextColor | Heading text color | color name or hex | white |
| subHeadingText | Subheading text | text | Get an accurate solar model of your home in less than 2 minutes. |
| subHeadingTextColor | Subheading text color | color name or hex | black |
Example
<script
id="auroraLCAI"
data-page-section="backgroundColor=pink|buttonText=Click me|headingText=Custom heading text|subHeadingText=Custom subheading text"
data-font="Audiowide"
data-org-id="your-organization-id"
src="https://leads.aurorasolar.com/lead-capture-sdk-v1.js"
type="text/javascript"
></script>
Side Button
The Side Button can be added to the page by adding the data-side-button property to the script tag:
<script data-side-button=""></script>
By default this will add the side button to your page and position it on the left side of your website. It will be dismissible and look like:
Customizations
It is customizable via additional properties that can be provided as the value to the data-side-button property. The properties and values should be added in the form of property=value. Each property and value pair should be separated by a pipe(|).
| property | description | Allowed Values | Default |
|---|---|---|---|
| position | Location of the side button | left, right | left |
| dismissible | If the close button should be shown | true, false | true |
| text | Displayed text | text of 25 characters or less | See your solar home in 3D |
| primaryColor | Color of the text and background color of the house icon | color name or hex | black |
| primaryHoverColor(1) | Used in place of the primaryColor when the cursor is over the side button | color name or hex | black at 70% opacity |
| primaryClickColor(1) | Used in place of the primaryColor when the side button is clicked | color name or hex | black at 60% opacity |
| secondaryColor | Background color of the text and color of the house icon | color name or hex | white |
| secondaryHoverColor(1) | Used in place of the secondaryColor when the cursor is over the side button | color name or hex | white at 70% opacity |
| secondaryClickColor(1) | Used in place of the secondaryColor when the side button is clicked | color name or hex | white at 60% opacity |
| closeButtonTextColor | Color of the X icon | color name or hex | black |
| closeButtonTextHoverColor | Used in place of the closeButtonColor when the cursor is over the X | color name or hex | black at 70% opacity |
| closeButtonTextClickColor | Used in place of the closeButtonColor when the X is clicked | color name or hex | black at 60% opacity |
Example
<script
id="auroraLCAI"
data-side-button="position=left|dismissible=true|primaryColor=blue|secondaryColor=white|text=Your custom text"
data-font="Audiowide"
data-org-id="your-organization-id"
src="https://leads.aurorasolar.com/lead-capture-sdk-v1.js"
type="text/javascript"
></script>