Styla Modular Content is used for embedding any Module inside a template that is used for multiple pages like product details or category grid. It can be displayed or not on specific URL groups where this template is used. Same as Pages and Magazines, it is managed by Styla CMS at editor.styla.com.
Modular Content covers a different use case than Pages and Magazines. Instead of large sets of modules, it is mostly used to embed only one module in a specific template which also includes content from different sources.
The most important feature of Modular Content is its reusability:
Integration of Modular Content on your website is very simple and consists of embedding a JS file and a <div> tag on your page. Compared to Pages and Magazines, the main differences are:
This goes into page's <head> tag:
<script src="https://engine.styla.com/init.js" async></script>
This goes into <body>, where you need Slot contents to be rendered:
If needed the script can be placed inline, directly above the div tag. This is useful especially if you as a content editor add them on a single page using a UI in your website's CMS.
Please don't include two slots from different Styla accounts on one page. If you do, none of them will be rendered and you will see a MULTIPLE_SLOT_CLIENTS_ERROR error in the console. Only content coming from one account will be delivered on several slots within one page.
If you're having timing issues and, for instance, Styla div is loaded after Styla JS has checked for it, please use the below to load the content in a specific moment:
You create and manage it the same way as Pages in editor.styla.com, only select the "Modular Content" type when creating:
For such content an additional drop-down list will be displayed top-right of page settings where you will be able to assign it to existing slots:
The "Custom Path" field (bottom-left of page settings page) will per default contain an asterisk (*) which will enable embedding the content assigned to the slot on every URL/page path. If you change it to a specific path, the content will only be enabled on this path while not loaded on paths not matching the content of the field where the slot is present.
You can add, remove and manage slots in the list that you reach by clicking the "Slots Manager" link in your user overlay top-right:
The below screencasts shows you all the steps needed to create and include a piece of modular content on a website (simulated by a CodePen).
This is a simple example page that we've created to demonstrate how Modular Content works:
The three pages use the same template with these two Slots embedded:
<div class="fixml dinHeight" data-styla-slot="7b35a82e-8e8d-4b09-a080-fa110dcc85df"></div>
<div class="fixml" data-styla-slot="9f83f29d-e989-4a97-98e5-4baf4ae0a59c"></div>
However, each of the pages displays a different set of two modules. This happens because two modules are assigned to each of the two Slots and the modules have different paths "whitelisted".
The 1st Slot: data-styla-slot="7b35a82e-8e8d-4b09-a080-fa110dcc85df":
The 2nd Slot: data-styla-slot="9f83f29d-e989-4a97-98e5-4baf4ae0a59c":
When creating slots, please have in mind that you don't need a slot for every single page/URL that you want to embed a piece of Modular Content. You only need a slot for every position on a given page template, no matter how many pages will use it.
So, for instance, if you want to display Modular Content top and bottom of your product details page, you only create two slots and place them in the page template HTML. Your content team will then be able to assign content to each of them in editor.styla.com and enable it on all or selected page paths only, as described above.