DML is currently taking crowdfunded investments! Invest $100 or more and support our mission to grow new and sustainable revenue streams for news publishers.

RESOURCES

Installation Guide

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

To generate an embed code, you may do so using the Embed Wizard in the Marketplace.

Generating an Embed Code

Access the Marketplace and select the collection you'd like to embed. Let's use the California Education collection by EdSource as our example.

EdSource product page banner with embed button

At the top of the page you'll notice a button with the text "embed for free." Click on it to access the Embed Wizard for that particular collection.

Marketplace Embed Wizard

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

Embedding the Collection

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.

Option 2: Installing Site-Wide

Add this within the <head> tag of your site.

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.

If you are using collections on multiple pages or collections across your site you can separate the embed code and place the <div> element where the collection should appear, and the <script> element inside the <head> tag.

Option 3: Google Tag Manager

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

Option B: Use HTML to add the JavaScript and the div tag to the page / add a placeholder div tag to the page.

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, as seen below.

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

Currently we provide the 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.

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.

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