Routing for Styla

TLDR: Now that your Styla content is rendered on your page(s), you need to forward all requests for Styla to it accordingly for your users and search engine crawlers to reach it. In order to do this, you will either have to set up some routing rules directly in your web server configuration or in your CMS or shop application.

What is needed

Directing all requests for your Styla path to the page on which Styla JS is embedded

1. Find out where would you set routing rules for the domain on which your Styla account(s) should be displayed. It's probably either directly your web server (.htaccess for Apache or configuration instructions for nginx) or some custom settings in your CMS or shop application. The latter usually feature specific controllers handling path rewrites for routing.  

2. Set a routing wildcard rule to redirect all requests for your Styla content root path and its subfolders to the page you embedded the Styla snippet on. Styla JS will take over from this moment on and show the content that is expected including 404 error pages.
An example of such a rewrite for Apache would look like this:

RewriteEngine On
RewriteBase /
RewriteRule ^rootpath/(.*)$ [P,L]

Unfortunately, we don't have an example for nginx or any CMS or shop application but they should follow the logic described above. If your Content Hub is embedded at then any request for /rootpath/* should be redirected to /rootpath/.

3. In case your website uses https, also insert this in the host configuration of the domain:

SSLProxyEngine On

Why this needs to be done

As a Single Page Application, Styla does not serve static HTML files for each URL. Content is rendered by JavaScript based on requests made.

Therefore the routing logic of the parent website should redirect all requests for Styla content to one URL on which the script is embedded and can render content accordingly. This is especially important for links to specific magazine URLs that have been saved on external websites or indexed by search engines. 

Once the wildcard is set up, crawlers will be able to access every magazine path and Styla pages will be visible on your website automatically, right after you publish them in Styla Editor. No manual snippet embedding will be needed as the wildcard rule will route requests to the page with the Styla snippet on and the JS there will serve correct content, including a 404 for Styla routes that don't exist.

Until the above wildcard rule is not implemented, all requests for magazine pages other than the root path (the main feed) and Styla Pages will end up in a 404 error from the parent website on which the Styla snippet is embedded. Furthermore, you will need to embed a snippet for each Styla page manually in your CMS.

Example live implementations

How to test your implementation

Once you have the above running on your local, stage and production environment, please make sure everything is working fine:

  1. Enter every path on your magazine (category feed, subcategory, story) and reload it.
  2. Enter a Styla page embedded on your website and reload it.

If the wildcard rule is not working correctly, you will get a 404 error from your website/shop application. This means you need to fix the routing, either in your:

  • custom integration (CMS routing controller) code
  • or web server routing settings
  • or Styla plugin configuration.

If there are any problems that you cannot solve, please contact Styla support.

Additional options

You can use data parameters in the div to force some additional behaviour on the Styla JS.

Forcing a specific Styla page

To do that, use data-area parameter like this:

<script src="//{styla-account}.js" async></script>
<div id="stylaMagazine" data-area="{styla-page-slug}">

This will make the Styla JS render page with a specific slug that you previously created in Styla CMS at

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.

Rewrite map for blog content imported to Styla

If you import content of your company blog from WordPress to Styla and its URL will change, Styla will take care of the import process. Furthermore, Styla can also provide you with a list of URLs to be redirected with a 301 to the new location. This ist would look like this:


Obviously, you can also set up Styla magazine to run on the same path as your blog on a different solution.