GET YOUR WIDGETS HERE

OWENS CORNINGROOFING WIDGETS
FOR CONTRACTORS

We’ve Made it Easy

From architectural shingle lines to inspirational style boards, we’ve made it easy for you to showcase Owens Corning Roofing products on your company website with our web widgets.

Widgets are small web components that allow you to use content from other websites by simply adding a few lines of code to your own website.

Our widgets are customizable. Just copy and paste the lines of code for the specific products that you would like to include (or exclude the ones you don’t) on your website, as shown in the widget instructions and examples.


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.

For the DEQ widget:

<script src="https://owenscorning.chameleonpower.com/js/widget/deq.min.js" async></script>
<script>
const deqDiv = document.getElementById('visualizer')
const deqZip = deqDiv.getAttribute('data-zip')
const widget = new deq({
target: '#visualizer',
zip: deqZip,
});
</script>

For the Other widgets:

<script src="https://apis.owenscorning.com/client/widget.js" async></script>
Step 2 of 2 - Add Widget Divs

Include one or more of the divs for the product line(s) you want to show, on the page where you would like the widget to show. These lines of code are included in the instructions for each widget on this page.

Example :
<div
data-shingle="trudefinition-duration-designer"
class="oc_shingle_view"
></div>
Please Note!

• We recommend only using 1-3 total widget lines per page.

• Adding all of the <div> below adds a LOT of content to your site, which will slow down the page it appears on.


Widgets


Shingles

Showcase our bright, bold, and brilliant TruDefinition® Duration® Designer asphalt shingles. These shingles offer spectacular curb appeal and the high performance and durability of our patented SureNail® Technology. TruDefinition® Duration® Designer features our 2019 Shingle Color of the Year, Black Sable.

Email Widget
Instructions

First select the line of shingles you would like to feature on your site. 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
<div
data-shingle="trudefinition-duration-designer"
class="oc_shingle_view"
></div>
Optional Modifiers
Shingle View

This changes the default preview to a close-up of the shingles. The default is a preview of the shingles shown on a house.

<div
data-shingle="trudefinition-duration-designer"
data-view="shingle"
class="oc_shingle_view"
></div>
Stacked Layout

This changes the layout from a side-by-side view to a stacked view.

<div
data-shingle="trudefinition-duration-designer"
data-layout="stacked"
class="oc_shingle_view"
></div>

Total Protection Roofing System®^ ( TPRS® ) Widget

Showcase the Owens Corning® Total Protection Roofing System® (TPRS) – our integrated system of components and layers designed to help a roof perform in three critical areas: SEAL. DEFEND. BREATHE.®

Email Widget
Instructions

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

<div class="total_protection_roofing_system"></div>

Design & Inspire Style Boards

This widget features our Design & Inspire style boards that we created using our popular Duration® Series Shingles. These style boards let customers see shingle and color pairings that help them get the entire vibe of a design before deciding on their roof color.

Email Widget
Instructions

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

<div class="oc_design_and_inspire"></div>

DesignEyeQ®

This design visualization tool allows homeowners to “try on” Owens Corning asphalt roofing shingles directly from your website.
The user can either upload their own photo or select a pre-loaded house to experiment with different shingle colors, as well as adjust the siding and trim color, to better understand how their color choice will affect the overall appearance of their home.
Email Widget
Instructions

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

<div id="visualizer"
data-zip="90210">
</div>
^ Excludes non-Owens Corning Roofing® products such as flashing, fasteners, pipe boots and wood decking.