TLDR: For a Styla Page or Magazine to be rendered on a page, you need to reference a script that renders it and a place a container with a specific ID in which it will be rendered.
This specification describes the best way to render Styla Pages and Magazines content with JavaScript. There is a legacy specification described below that is still working but a bit slower hence should not be used for new Styla clients.
<script src="https://engine.styla.com/init.js" async></script>
<div data-styla-client="${clientName}">${staticHtml}</div>
<div data-styla-client="${clientName}">${staticHtml}</div>
<script src="https://engine.styla.com/init.js" async></script>
Once embedded, the script will render a piece of content matching the relative path of the page on which it is embedded. If no page matching this path has been published for this clientName with editor.styla.com then the script will render a Styla 404 message.
Please pay attention to trailing slashes. If a page you have published in editor.styla.com does not have a slash at the end while the URL on which you ran the script ends with a slash, the script will display a 404 message. A rule can be set by Styla CSM to have all your Styla paths end in a slash automatically.
Styla content will be rendered where the <div> is placed in your website's template (usally between its header and footer) in users' browser window.
We don't guarantee that embedding Styla JS with any external tag manager will work. If it's essential, please take your time to test it and contact Styla's support if you need our help or have questions.
Styla content will only be displayed in mobile size/style if the <meta name="viewport"> tag is present on the parent page. Most CMS generate it automatically but if yours does not, please include it.
On clients' request we can allow browser to display static HTML rendered server-side based on tags from the SEO API until Styla JavaScript renders content. If you are interested in this option, please contact your Customer Success Manager at Styla.
<script src="https://engine.styla.com/init.js"></script>
b
<body>
<div data-styla-client="obi"></div>
</body>
<script src="https://engine.styla.com/init.js" async></script>
d
<body>
<div data-rootpath="/" data-styla-client="hardeck" data-styla-content=""></div>
</body>
This specification describes the older way to render Styla Pages and Magazines content with JavaScript. It's a little bit slower than the one described above but is still used by many Styla clients.
Rendering your Styla Content in a <div> using the JS file from Styla:
<script src="//client-scripts.styla.com/scripts/clients/{styla-account}.js" async></script>
It's usually between the header and the footer:
<div id="stylaMagazine"></div>
<div id="stylaMagazine"></div>
<script src="//client-scripts.styla.com/scripts/clients/{styla-account}.js" async></script>
<link rel="dns-prefetch" href="//styla-prod.us.imgix.net"><link rel="dns-prefetch" href="//client-scripts.styla.com"><link rel="dns-prefetch" href="//redpanda.styla.com">
You can find these code snippets in page sources on the pages linked to below.
1. Prefetch statements:
<head>
<link rel="dns-prefetch" href="//client-scripts.styla.com"><link rel="dns-prefetch" href="//redpanda.styla.com"><link rel="dns-prefetch" href="//styla-prod.us.imgix.net">
</head>
2. Client's snippet (an example past version number):
<head>
<script src="//client-scripts.styla.com/scripts/clients/northsails-en.js?v=169C45B21FC-39"></script>
</head>
3. Client's div:
<body>
<div id="stylaMagazine" data-rootpath="/gb/en/s/"></div>
</body>
1. Prefetch statements:
<head>
<link rel="dns-prefetch" href="//client-scripts.styla.com"><link rel="dns-prefetch" href="//redpanda.styla.com"><link rel="dns-prefetch" href="//styla-prod.us.imgix.net">
</head>
2. Client's snippet (an example past version number):
<head>
<script>
window.mak.afterCreate.push(function () {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.setAttribute('src', 'https://client-scripts.styla.com/scripts/clients/yourhome-de.js?v=169C45B21FC-175');
head.appendChild(script);
});
</script>
</head>
3. Client's div:
<body>
<div id="stylaMagazine"></div>
</body>
Once you have the above running on your local, stage and production environment, please make sure everything is working fine:
If there are any problems that you cannot solve, please contact Styla support.
You can use data parameters in the div to force some additional behaviour on the Styla JS.
To do that, use data-styla-client and data-styla-content parameters like this:
<script src="https://engine.styla.com/init.js" async></script>
<div data-styla-client="{styla-account}" data-styla-content"={styla-page-slug}">
This will make the Styla JS render page with a specific slug that you previously created in Styla CMS at editor.styla.com.
If you have multiple other pieces of content on that page and want to use title of one of them for the JS-rendered content (to appear in the browser's tab) then add this parameter:
<div data-styla-client="{styla-account}" data-styla-seo="false">
This is very useful when embedding Styla content on your Home or any other page outside of the Styla root path wich streamlines publishing of Styla content. However, there is a caveat: integration with the SEO API won't work out-of-the-box and fetching tags for this page needs to be hardcoded.
You can also force a specific root path to avoid 404 error from Styla if you embed content that normally is displayed on a different URL. Use data-rootpath parameter to achieve this:
<script src="//client-scripts.styla.com/scripts/clients/{styla-account}.js" async></script>
<div id="stylaMagazine" data-rootpath="/gb/en/inspiration/">
This will make the Styla JS render page on the /gb/en/inspiration/ path correctly, even if this account has a different root path set - and would render a 404 from Styla without this parameter.
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:
window.styla.init()
This will be especially useful if you embed Styla content into a single-page application. Please make sure to remove Styla content from the scope once no longer needed. Otherwise it might stack up and clutter your DOM.