DML is currently taking crowdfunded investments! Invest $100 or more and support our mission to grow new and sustainable revenue streams for news publishers.
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.
Access the Marketplace and select the collection you'd like to embed. Let's use the California Education collection by EdSource as our example.
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.
Once you have generated an embed code follow the instructions below to add it to your site.
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.
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.
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.
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:
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:
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.
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.