Managing Styla Accounts

This page shows you how to create new organizations, domains and users and how to configure feature flags and other settings for them.

Organization, Domain and user

In order to set up a fully functioning Styla environment for a new client, you'll need to configure three different level of entities. The table below discusses each of them briefly.

Entity:	Details:
Organization	This is the highest level which in most cases will equal a client owning multiple brands and employing multiple people. Organization groups all of these and lets you share access to all or only some brands to specific people.
Domain	This is the intermediate level which in most cases will equal either a client's brand (if available only in one language/country) or once of its language/country versions (if multiple locales available). If the parent brand's website, on which the Styla content is to be included, is available in multiple locales, you will need to create one Styla domain for each of them. Then you will need to configure your integration with Styla in a way that uses a specific Styla domain on a specific website's locale. This way you can publish content in language matching each of the website's locales and also use product inventory from a specific country and with prices in a matching currency to create Styla content. Each domain can source product data from a different Styla Product API config but if you need to, some of them can share the same config (product inventory). Technically, content from one domain can be embedded on multiple website locales but this will probably lead to only one of URLs on which it used getting any SEO ranking for this content. Styla SEO API delivers a canonical link for every Styla page and it will only be different if sourced from a different domain. When you create domains for multiple locales within one website (and one Styla organization), they are linked to each other so that you can automatically create linked copies for every language (to be updated in one place) and for all of instances of such page in different locales to output link rel="alternate" URLs that let search engine bots crawled multiple language/country versions and provide one of them in search results, depending on end-user's browser language/location.
User	This is the lowest level which in most cases will equal a person working for your client. A user (login+password) can also be shared by multiple persons if they don't need a separate one for each of them. You can apply four privilege levels for each user on each organization/domain. So it's a matrix that enables a very granular access levels, from bottom to the top: - Reader - can log in to the Editor and view pages (but not create not change them) - Editor - can in addition create and update pages (but not publish them) - Publisher - can in addition publish pages and updates - Admin - can in addition create/manage other users All of these can be applied on an organization or domain level. So user A can be able to only create pages (but not publish them) on domain X while publish them as well on domain Y while user B can be do everything on domains X, Y, Z that are part of their organization.

Styla Organization Manager

The above name refers to a web interface in which you can manage your client's accounts. It is available at https://admin.styla.com/ and you will need to log in there with your user and account. You will only be able to manage accounts that you have created. If there is any specific account you need to manage but don't have an access to, you will need to ask Styla for help.

Steps to set up new client

For every new client, you will need to start creating the entities above from the top. These are the steps to take:

Go to the "Your Organizations" tab, click the "add Organization" button, fill in the name field and save the changes. There is no other settings here.
Go back to the "Your Organizations" tab and click your newly created organisation's name to enter it. Then click the "Create a domain" link top-right. On the resulting screen fill in the domain name and click "Create". If you need to create multiple domains for a brand, prepare a list before. You can avoid later misunderstandings by keeping one convention, for instance: mydomain-en-gb for English/Great Britain and mydomain-de-de for Germany/German.
Go back to the ""Your Domains" tab, find your newly created domain and enter it to edit settings. You will need to enter a simple JSON into the "DOMAIN CONFIGURATION" tab and switch some feature flags ON. More details about settings below.
Repeat this process for every domain you need to create.
Now go to each of the newly created domains and and click the "Create User" link top left. Then fill in the following form with user's Email (will serve as a login, Styla won'r be sending any messages to it), name, surname and password. It makes sense to create passwords with a tool like this one and then obviously save them to be later shared with the client.
Make sure to apply the appropriate User Roles (mentioned in the table above) to each of the newly created users in the organisation or domain context.

Once you've went through the steps, you can move on creating some example content and configuring CSS for the new client which will be much more time-consuming and is explained on this page.

Domain Settings JSON

For every newly-created domain, you will need to paste a simple JSON snippet with some basic config into the "DOMAIN CONFIGURATION" tab. You can use the JSON below as a template.

{
    "urlPatterns": [
        {
            "type": "PAGE",
            "pattern": "en-us/prefix-page/{path}/"
        },
        {
            "type": "STORY",
            "pattern": "en-us/prefix-story/{path}/"
        }
    ],
    "embed": {
        "lang": "EN",
        "region": "US",
        "magazineUrl": "https://www.mydomain.com/",
        "shop": {
            "productTab": "config-name"
        }
    },
    "includeScripts": [
        "scriptName",
        "https://www.myotherdomain.com/assets/js/myscript.js"
    ]
}

How you set this up:

urlPatterns - this array holds settings for default path of new story and page pages created in the Editor. If Styla content for this domain will be displayed on the /en-us/ of the parent website, start the pattern field contents with them. Both prefix elements of the path are optional but keep the {path} which will be substituted with a slugified title of new page created ("My New Page" --> "/my-new-page/" ). Use the trailing slash or not, depending on if the parent website routing uses it. Pages created in the Editor need to match it.

lang and region - these fields matter to search engines and need to be set up with ISO language and country codes that search engines understand. They will be delivered to them in link rel="alternate" tags by Styla SEO API.

magazineUrl - this needs to be filled in with the (sub)domain on which Styla content from this domain will be embedded, including the protocol. The field will be used to construct canonical links delivered by the SEO API, page slugs will be added to them. So setting it up wrongly will result in a search engine penalty.

shop - this node sets up a Styla Product API config to source product content from. At the moment you cannot configure them yourself. Styla will need to configure them for you an then you simply substitute the "config-name" with the proper name. If you don't need to use any products on this domain, simply remove it.

includeScripts - this array lets you load external scripts on every Styla page created with this account. You can set Styla scripts to be loaded with just script name or reference a script on any other web location with a full URL. If you need to load a script only on certain pages, include it in an iframe in an HTML module instead.

Feature Flags

The domain view also features several switches for features that can be activated for a specific domain. You will need to activate some of them for the domain to work as expected. Some of them should only be activated on client's request.

Feature flags explanation

nle - this activates Styla's default Layout Engine which used to be the New LE hence the name. If you switch this off, the Old one will be used and you won't be able to configure the CSS.

hreflang - this makes the SEO API output link rel="alternate" tags. No reason to deactivate it, even if you only have one domain in your organization.

slotsManagement - if activated enables client to create the third type of Styla content (besides Stories and Pages) - Modular Content in the Editor and also the Slots Management menu.

stickers - this enables use of tiny tags ("SALE" or "TOP QUALITY") on Banner and Product modules. They need to be configured by Styla per client beforehand.

allowAreaCopyStrategyChoice - this activates the dropdown letting you copy a module to another page and keep it linked (the same module embedded on two pages)

avoid_font_loading - if activated makes Styla front-end not load font files (via an external CSS or Google Fonts), even if configure in Theme settings. Only activate it if the parent website itself loads all fonts needed to properly display Styla content and font-family definitions ins Styla CSS match them.
Note: All client pages in prerender.io have to be invalidated after changing this feature flag as long the client is using our seoapi service.

seo_hydration - if activated, this makes Styla front-end first display a non-JS version of the content (which will load faster) delivered from the parent website's cache and then enrich it with JavaScript (which takes more time to load and execute). Switch if off if integration with the SEO API does not work correctly as it supplies the website cache with the non-JS content.

l18_hreflang - this enables the feature to automatically create (and publish, if needed) copies of a page into other domains for different languages and then maintain each language in one place (as linked modules on multiple pages). Switch it off if there's only one domain/language for your brand/company.

dunning - switch it on if a client hasn'T paid their invoices. It will show a reminder about this in the Editor.

designAI - an experimental feature, don't turn it on.

disableAutoSaving - disables auto saving your content in the Editor. Otherwise the autosave will happen every 30 seconds.

use_non_retina_images - if switched on, this will make Styla front-end not load higher resolution images for retina displays. Switch it on (and lower the image quality from imgix in Them settings) if your client is unhappy with loading speed.

cs_omit_categories, cs_omit_settings, cs_omit_areas - each of these removes a bit of content from Styla JavaScript in order to lower the load. If you switch it on, test properly on every type of content.

modularContent - this is an older version of the slotsManagement. Don't turn it on.

one_editor - this is an improvement for routing for Styla content which lets you create pages in the Editor for every path on the website. Before there used to be one specific path on a website on which Styla content was enabled. Don't switch it off unless the client's integration/plugin only allows Styla content to be displayed on one path. In such case additional config updates by Styla will be needed.

segmentation - enables setting up multiple versions of a specific page in the Editor. Activating this does not make sense before sourcing of user segments from an external API is configured by Styla.

html_allow_dangerous_js - if switched on, this will display an additional switch in HTML modules that will enable execution of inline JavaScript from this module instance. Inline JavaScript is per default blocked by Styla front-end.