Installation and Setup

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=""></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=""></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

You can also use Google Tag Manager to inject the code into your site. This is a more complex setup. Documentation can be found here.

Alternate Layouts

Collections are provided with a default layout for mobile and deskptop.

Alternate layouts for desktop can be enabled by providing an additional layout attribute on the collection tag.


Currently we provide following layout options:

  • default 4x1 collection - no layout attribute required
  • 3x1 collection - layout attribute value: threebyn
  • 2x2 collection - layout attribute value: twobyn
  • One large image with three smaller images below - layout attribute value: oneplus3
  • A 'sidebar' layout that can be used to fit into a 300px wide column - layout attribute value: sidebar

We also provide the ability to display a collection as a full page of content. Please refer to the Fullpage Installation Guide for more details.