Owens Corning
Roofing Widgets

Shingle Widget

Showcase the Shingle Product Lines You Sell

Our Shingles Widget allows you to easily and beautifully showcase the Owens Corning Roofing® shingle products that you sell directly on your website. The widget will display the shingle lines you choose to include and allows your customers to easily browse product and color options without leaving your website. The widget includes all product lines and colors, including our Shingle Colors of the Year.

Instructions:

First select the line of shingles you would like to feature on your site. Then select the default view, house view style, shingle color options, and layout view. See the preview below of what your widget will look like.

Then copy this div and place it in the corresponding place on your site where you would like the widget to appear.

Select a Shingle Line
Choose Default View

Select the default view of your image: House View or Shingle view. Users will be able to toggle between both.

Select House Style

For the house view, you have 3 styles to choose from. To view these styles, click on each image for a larger view.

Select Widget Layout

Select how you would like the widget laid out, with the Primary images stacked above, or to the left of the shingle selector.

Note: Side by Side view only applies to screen widths of 768px and above. Below 768px, the widget will revert to Stacked view.

Widget Preview

This is a preview of how your widget would look on your site.

Website Installation Instructions

Step 1 of 2 - Add Javascript

Include this javascript in the <body> section of your website. We recommend that it is placed right before the final </body> tag.

<script src="https://apis.owenscorning.com/client/widget.js" async></script>

Step 2 of 2 - Add Widget Divs

Once you have completed step 1, you are all set to install the shingle widget on your website.

Copy this div and place it in the corresponding place on your site where you would like the widget to appear.

<div
 class="oc_shingle_view"
 data-shingle="trudefinition-duration"
 data-view="house"
 data-layout="row" 
 data-style="default"
>
</div>
Email Widget