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.
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/(.*)$ http://example.com/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 http://example.com/rootpath/ 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
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.
/s/ is the root path reserved for any Styla content and is added after locale parameters by Styla SalesForce CC plugin configured on the website.
Any URLs for for Styla pages displayed at /s/ are configured on the Styla's end per account.
English:
https://webstore.northsails.com/gb/en/s/men
https://webstore.northsails.com/gb/en/s/women
https://webstore.northsails.com/gb/en/s/sustainable-collection-en/
Magazine:
https://webstore.northsails.com/gb/en/s/log/
https://webstore.northsails.com/gb/en/s/log/story/les-voiles-de-saint-tropez-capsule-collection
German:
https://webstore.northsails.com/de/de/s/herren
https://webstore.northsails.com/de/de/s/damen
https://webstore.northsails.com/de/de/s/sustainable-collection-de
Magazine:
https://webstore.northsails.com/de/de/s/log/
https://webstore.northsails.com/de/de/s/log/story/les-voiles-de-saint-tropez-capsule-collection
/wohnideen/ is the root path reserved for any Styla content and any content at /wohnideen/* is routed to the page with the Styla JS snippet on it by client's custom code (Styla plugin)not used.
Main feed:
https://www.universal.at/wohnideen/
Category:
https://www.universal.at/wohnideen/category/interior
Subcategory:
https://www.universal.at/wohnideen/interior/wohnzimmer-ideen
Story:
https://www.universal.at/wohnideen/interior/wohnzimmer-ideen/feng-shui-im-wohnzimmer-so-richten-sie-es-ein
Once you have the above running on your local, stage and production environment, please make sure everything is working fine:
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:
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-area parameter like this:
<script src="//client-scripts.styla.com/scripts/clients/{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 editor.styla.com.
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.
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:
/ https://www.blog.example.com/blog/
/category-1/story-slug-1 https://www.example.com/blog/category-1/story-slug-1
/category-2/story-slug-2 https://www.example.com/blog/category-2/story-slug-2
Obviously, you can also set up Styla magazine to run on the same path as your blog on a different solution.