Embedding a Widget Using Web Components

Embedding widgets using web components requires basic integration that includes the widget in the HTML head and body of a webpage, as well as additional configuration for performance, styling, custom events, and so on.

Prior to performing the steps below, review the Guidelines for Embedding Widgets for the widgets you intend to embed. Repeat these steps for each webpage that includes embedded widgets.

On this page:

Widget Names

When embedding widgets, use the following widget names:

Feature	Widget Names
Account Center	`widget-communication-preferences`
Affordability Savings Hub	`widget-lmi-survey-programs`
Bill Comparison	`widget-bill-compare-enhanced`
Bill or Usage Forecast	`widget-bill-forecast`
Bill Guide	`widget-bill-guide`
Business Profile	`widget-business-profile`
Confirmation Message	`widget-bite-sized`
Data Browser	`widget-data-browser`
Demand Heatmap	`widget-demand-heatmap`
Energy Use Overview	`widget-usage-overview`
Green Button	`widget-usage-export`
Guest User Access	`widget-guest-user-access`
Highest Energy Use Days	`widget-highest-day-of-use`
Home Energy Analysis v1 - Authenticated Workflow	For the survey questions, you must use `widget-survey`, and define the `opower-instance` to embed the survey questions on a separate webpage. This webpage must exclude footers and side navigation panels. The full embedded tag is: Copy `<opower-widget-survey opower-instance="widget-survey-full"></opower-widget-survey>` For the pre- and post-survey experience, you must embed both `widget-survey` and `widget-disaggregation` together on the same webpage, and define the `opower-instance` attribute as part of the embedded tag. Only one experience is displayed to customers at a time. The full embedded tags are: Copy `<opower-widget-survey opower-instance="widget-survey-splash"></opower-widget-survey>` Copy `<opower-widget-disaggregation opower-instance="widget-disaggregation"></opower-widget-disaggregation>`
Home Energy Analysis v1 - Pre-Authenticated Workflow	You can allow customers to access the survey without logging in to their utility account. For the survey questions, you must use `widget-survey` to embed the survey questions on a separate webpage. This webpage must exclude footers and side navigation panels. The full embedded tag is: Copy `<opower-widget-survey opower-instance="widget-survey-easyopen-full"></opower-widget-survey>` For the pre and post survey experience you must embed both `widget-survey` and `widget-disaggregation` together on the same webpage. Only one experience is displayed to customers at a time. The full embedded tags are: Copy `<opower-widget-survey opower-instance="widget-survey-easyopen-splash"></opower-widget-survey>` Copy `<opower-widget-disaggregation opower-instance="widget-dissagregation-easyopen"></opower-widget-disaggregation>`
Home Energy Analysis v2 - Authenticated Workflow	For the survey questions, you must use `widget-survey`, and define the `opower-instance`, to embed the survey questions on a separate webpage. This webpage must exclude footers and side navigation panels. The full embedded tag is: Copy `<opower-widget-survey opower-instance="widget-survey-full"></opower-widget-survey>` For the pre and post survey experience you must embed both `widget-survey` and `widget-usage-categories` together on the same webpage, and define the `opower-instance` attribute as part of the embedded tag. Only one experience is displayed to customers at a time. The full embedded tags are: Copy `<opower-widget-survey opower-instance="widget-survey-splash"></opower-widget-survey>` Copy `<opower-widget-usage-categories opower-instance="widget-usage-categories"></opower-widget-usage-categories>`
Home Energy Analysis v2 - Pre-Authenticated Workflow	You can allow customers to access the survey without logging in to their utility account. For the survey questions, you must use `widget-survey` to embed the survey questions on a separate webpage. This webpage must exclude footers and side navigation panels. The full embedded tag is: Copy `<opower-widget-survey opower-instance="widget-survey-easyopen-full"></opower-widget-survey>` For the pre and post survey experience you must embed both `widget-survey` and `widget-usage-categories` together on the same webpage. Only one experience is displayed to customers at a time. The full embedded tags are: Copy `<opower-widget-survey opower-instance="widget-survey-easyopen-splash"></opower-widget-survey>` Copy `<opower-widget-usage-categories opower-instance="widget-usage-categories-easyopen"></opower-widget-usage-categories>`
Home Energy Analysis Call-to-Action	`widget-hea-cta`
Home Energy Analysis Light	`widget-usage-categories-overview`
Neighbor Comparison	`widget-neighbor-comparison`
Next Best Action	`widget-next-best-action`
Peak Time Rebates	`widget-peak-time-rebate`
Portfolio View	`widget-portfolio-view`
Rate Comparison	`widget-rates`
Solar Savings Insight	`widget-solar-savings`
Solar Welcome Experience - How Solar Works	`widget-how-solar-billing-works`
Tips Light	`widget-tips-light`
Tips List	`widget-ways-to-save` This widget is part of the Ways to Save widget described in Ways to Save. This widget can be configured to display the Tips List user experience by default rather than the Ways to Save experience.
Ways to Save	`widget-ways-to-save`

Embedding a Widget

Widgets are embedded by adding scripts and tags directly in the source code of your webpages. The following code is an example of the basic integration of widgets on a webpage for OpenID Connect-based SSO implementations, with emphasis applied to the main integration points.

The instructions below guide you through each step of the process and provide more background information about each the scripts and tags that are required.

Prerequisite: If you are using Oracle Infinity to track engagement analytics for your website, then you must load your Oracle Analytics Infinity CX Tag on your webpage before completing the steps below. Otherwise, analytics tracking for your widgets will not work. See Tracking User Interaction Analytics for instructions. You can ignore this step if you are not using Oracle Analytics Infinity.

To prepare a webpage for embedding and embedding widgets on the webpage for OpenID Connect implementations:

Include the main script tag for the core library within the HTML head of the webpage. A single script tag is required regardless of the number of widgets embedded in the body of the page. The script tag uses the following syntax:
Copy
```
<script src="https://[HostName]/ei/x/embedded-api/core.js"></script>
```
Where HostName is the applicable host information. When embedding on the stage environment, the format is ei-[ClientCode]-stage.opower.com, where ClientCode is the client code assigned for the utility. Contact your Oracle Utilities Delivery Team to confirm your client code. When embedding on the production environment, the format is [ClientCode].opower.com.
Append auth-mode=oauth as a query parameter and value to the src attribute in the script tag.
Append locale as a query parameter to the src attribute in the <script> tag. This is an optional parameter that allows embedded widgets to reflect a locale preference change by the customer that occurs after the customer has signed in to the Energy Management Web Portal. This parameter does not affect the outbound communication locale preference for a customer. The value for the locale parameter must be defined as the locale for the page where the widget is embedded. The example below for the production tier uses a static definition of US English:
Copy
```
<script src="https://util.opower.com/ei/x/embedded-api/core.js?auth-mode=oauth&locale=en_US"></script>
```
Include the required HTML in the location on the page where the widget is to appear. This HTML includes a call to the relevant widget, which uses the following format:
Copy
```
<opower-[WidgetName]></opower-[WidgetName]>
```
Where WidgetName is the name of the applicable widget. If you are embedding the Home Energy Analysis, you must also define the opower-instance attribute. The full list of widget names is provided above. An example of embedding the Bill Comparison widget is shown below:
Copy
```
<div>
<opower-widget-bill-compare-enhanced></opower-widget-bill-compare-enhanced>
</div> 
```
Repeat the previous step for each widget you are including on the webpage. If you embed multiple widgets on a single webpage, consider a strategy to improve the load performance of the widgets that link to other widgets on the same page, which is described in Avoiding Webpage Refreshes.
Include listeners on the webpages, where a widget displays the authenticated experience, to provide required entity IDs and access tokens. These techniques are described at Providing Access Tokens and Authenticating Customers in Support of OpenID Connect.
Send your Delivery Team a listing of all your webpage URLs that contain the embedded widgets, along with the widget names included on each webpage. Any updates to the locations where the widget is embedded must be communicated to Delivery Team in advance of deploying the widget to the new location. This information can be provided along with other configuration inputs, as instructed in the Oracle Utilities Opower Digital Self Service - Energy Management Configuration Guide.
If your website uses a Content Security Policy, configure it to allow Oracle Utilities Opower resources. Contact your Delivery Team to obtain the domains and resources that should be allowed.

This process completes the minimum required steps to embed widgets on a webpage. You can employ additional techniques to improve the performance, user interaction, and overall look-and-feel of the widgets within the website. See Improving User Experience Scenarios with Custom Events for more information.