Getting Started:

You can include dynamic, up-to-date Digi product content with just one script and a div tag.

JS

Include this script at the bottom of your page. You only need to include the script once even if you're displaying multiple Digi Shadows on one page.

<script type="text/javascript"  src="https://pimselect.com/scripts/digi-embed/embed-script.js"></script>

XML

The script above allows us to parse and format our central data.xml document, allowing us to use the data-format attributes to embed a pre-defined block of content.

HTML

The syntax for the Digi Shadow is simple. Use one of the predefined classes to determine the product you want to display. The data-format attribute will define the layout or type of information shown in your Digi Shadow. Use one of the predefined Data-Formats to select the contents of your Digi Shadow.

class value = determines the product we're showing

data-format value =determines the content and layout (see examples)

<div class="digi-EX50" data-format="digi_Card"></div>

CSS

By default, the Digi Shadow will inherit your page's body styles, including fonts and text color. The Digi Shadows also include predefined 'parts' that allow you to style elements to fit your website's style. Check the list of parts to define your own styles or review the Digi Shadow with developer tools to see the parts yourself

<div id="digi-core" data-format="digi_FullDescription"></div>
<style>
      #digi-core::part(product-name) { color: #94391d; font-family: 'TheMix'; font-size: 1.25rem; }
</style>

Reference

Product Embed Classes

  • digi-EX50
  • digi-EX12
  • digi-IX10

Data-Format Values

  • digi_ContactInfo
  • digi_ProductName
  • digi_MarketingName
  • digi_ProductDescription
  • digi_Gallery
    • digi_Image_Hero
    • digi_Image_Hero2
    • digi_Image_Front
    • digi_Image_Back
    • digi_Image_Left
    • digi_Image_Right
  • digi_PartNumbers
  • digi_Card
  • digi_FeaturesList
  • digi_FullDescription
  • digi_SpecsTable

Shadow Parts for Styling

Use these Shadow Parts to target elements via CSS:

  • ::part(product-container)
  • ::part(product-image)
  • ::part(product-content)
  • ::part(product-name)
  • ::part(product-description)
  • ::part(features)
  • ::part(overview)
  • ::part(specs-table)

Layout Demos

digi_MarketingName

 

digi_Card

 
<div class="digi-EX50" data-format="digi_Card"></div>

digi_Featureslist

 
<div class="digi-EX50" data-format="digi_FeaturesList"></div>

Full Description Layout

 
<div class="digi-EX50" data-format="digi_FullDescription" ></div>

Specs Table

All shadow DOM objects offer limited styling options with the use of the ::part() CSS selector. This allows hosting pages to target a specific element within the embedded shadowDOM object and customize it to fit the website's branding.

 
<div class="digi-EX50" data-format="digi_SpecsTable"></div>

Contact Info

 
<div class="digi-EX50" data-format="digi_ContactInfo"></div>

Product Description

 
<div class="digi-EX50" data-format="digi_ProductDescription"></div>

Product Overview

 
<div class="digi-EX50" data-format="digi_Overview"></div>

digi_Datasheet

 
<div class="digi-EX50" data-format="digi_Datasheet"></div>

digi_PartNumbers

 
<div class="digi-EX50" data-format="digi_PartNumbers"></div>