RESOURCES

Installation Guide

Embedded Collections are easy to integrate into your site, using a couple of lines of html and javascript.

Once you have generated an embed code follow the instructions below to add it to your site.

Option 1: Adding to a single page

To add this to a single page or to a single template, copy and paste the generated embed code onto a page to try it out.

<div data-stackid="sample" class="dml-widget-container"></div>
<script async src="https://c.go-fet.ch/a/embed.js"></script>

Option 2: Installing site-wide

If you are using collections on multiple pages or multiple collections across your site you can separate the embed code and place the div tag where the collection should appear and the script tag at the end of the page.

Add this to the footer of the site – ideally just before the closing body tag.

<script async src="https://c.go-fet.ch/a/embed.js"></script>

Add the container wherever you want the collection to appear. This should work on an article page, or a section/front page. You can add multiple collections on the same page.

<div data-stackid="sample" class="dml-widget-container"></div>

Option 3: Google Tag Manager

Option A: Use GTM to add the javascript to the page / add the DML div tag to the page

<script async src="https://c.go-fet.ch/a/embed.js"></script>
<div data-stackid="sample" class="dml-widget-container"></div>

Option B: Use GTML to add the javascript and the div tag to the page / add a placeholder div tag to the page.

<script>  
  var stackid="sample";  
  var placeholder = document.getElementById("dml-placeholder");  
  placeholder.dataset.stackid=stackid;
</script>
<script async src="https://c.go-fet.ch/a/embed.js"></script>
<div id="dml-placeholder" class="dml-widget-container"></div>

Note:

Alternate Layouts

Alternative layout examples can be seen on our Layouts page. These allow you to display a Collection using different numbers of thumbnails and headlines on each row, and at different sizes.

You can select your layout option choice when you access the embed code from the Marketplace or Publisher Hub, and the right code will be provided to you in the Embed Wizard.

It is also possible to set these in the code manually by providing an additional layout attribute on the collection tag.

<div  
  data-stackid="sample"  
  data-layout="sidebar"  
  class="dml-widget-container">
</div>

Currently we provide following layout options:

Full Page Layout

DML Fullpage Collections are designed to fill the body of a page with a list of articles. This layout would be similar to many subsection pages on websites. Fullpage Collections are easy to integrate into your site, using a couple of lines of html and javascript.

Step 1: Create a new page on your site

Create an empty page on your website using a standard section page template. The Fullpage Collection is designed to fit into the body of the page. You could include a right rail in the template if you wish.

Step 2: Embedding the Collection

Copy and paste the generated embed code onto a page to try it out.

<div  
  data-stackid="sample"  
  data-layout="fullpage"  
  data-items="20"  
  class="dml-widget-container">
</div>
<script async src="https://c.go-fet.ch/a/embed.js"></script>

Swap out the value in the data-stackid attribute for the ID of the collection that you wish to embed.

If you wish to show less items on the page, change the data-items attribute to the number of items you wish to display.

Section Layout

DML Sections are designed to fill the body of a page with multiple collections. This layout would be similar to many section pages on websites. DML Sections are easy to integrate into your site, using a couple of lines of html and javascript.

Step 1: Create a new page on your site

Create an empty page on your website using a standard section page template. The Section is designed to fit into the body of the page. You could include a right rail in the template if you wish.

Step 2: Embedding the Section

Copy and paste the generated embed code onto a page to try it out.

<div data-sectionid="sample" class="dml-section-container"></div>
<script async src="https://c.go-fet.ch/a/embed.js"></script>

Swap out the value in the data-secitonid attribute for the ID of the section that you wish to embed.