Welcome to Styla Integration Guide

Hi. You're probably here to take care of integration with Styla for your employer/client. That's nice. This content will guide you through the process and give you information you need. Even though its main goal is to make integration easier, it also describes general concepts behind Styla.

What Styla is

Styla is a JavaScript-based content solution that you embed on your website. It both uses data you provide and provides data for you to use. It needs some integration on your end to work.

Styla products

There are three products our client use, depending on options in their contracts:

  • Pages: Styla content (one path) is embedded between header and footer on a single page.
  • Magazines: Styla content (multiple paths: blog feeds and single post pages) is embedded between subpage header and footer on a single page.
  • Modular Content: Styla content is embedded inside a template that is used for multiple pages like product details or category grid. It can be displayed or not on specific pages using this template.

The above products have several features in common, especially:

  • they are managed in Styla CMS at editor.styla.com,
  • they consist of modules that can be dragged and dropped freely and filled with content like text and images,
  • product data from your shop can be used in product creation to have product images and details in the content,
  • the content is rendered by JS (Pages and Magazines also render HTML server-side),
  • once the integration is done, publishing new Styla content does not require any work from your developers.

You will find more information about Styla features on this page. And even more information about SEO and speed-related issues here.

How does Styla work

The diagram below shows how Styla content (Pages, Magazines, Modular Content) is delivered and displayed on the host website, which routes to pages with Styla content on them, includes Styla JavaScript that renders content in browser window and renders Styla content server-side too. Making sure this all works is delivered in integration process - or a Styla plugins. You can read more about them below on this page.

Styla plugins

As a first step, please check if your website and shop are powered by any of the applications Styla has plugins for. If you use any of the ones mentioned on this page, you simply install and configure the plugin and don't have to do any development work.  

The plugins don't handle embedding of Modular Content as this depends on each shop's front-end heavily.

Integration options

If your website and shop solutions are not on the list, then some development on your end will be required. There are several integration options provided and you should decide which ones you are going to use and invest your work into. You can see a summary of them in the table below. The table contains links to applicable sections of this documentation for each of the options, so that you can check them directly. 

The work efforts below are estimates and will vary depending on how complex your tech stack is and how experienced your developers are.

Integration option: Work effort: Benefits:
Embedding Styla JS for Pages and Magazines:
JS+HTML snippet 0-1hr Styla JS embedded and rendering Styla content between header and footer of your website.
Routing for Pages and Magazines:
Wildcard URL rule 1-4hrs
  • Every page published in editor.styla.com is automatically available on your website
  • Relevant for Magazines only: Styla URLs are resolved by your web server and can be crawled by search engines and visited from search results
Embedding Modular Content
JS+HTML snippet 0-1hr per template Styla modules are displayed on a specific template and their content can be managed in editor.styla.com in terms of a) what content is displayed b) where it is displayed (specific paths on your website can be whitelisted).
Product integration:
Product data in static files 4-12hrs Enables users to search for a product by its name and SKU and add products into Styla content directly from editor.styla.com.
This file is only crawled every 6 hours by Styla so there will be a delay between the time you update it and new products visible in editor.styla.com.
Product data as JSON API 8-16hrs Product data (from Categories Endpoint and Search Endpoint) is sourced in real time so it’s always up-to-date in editor.styla.com and on Styla content.
Only this way lets Styla enabling the "Add to Cart" function since real-time availability for products is needed.
Add to Cart functionality 4-8hrs Customers can add products listed in the Styla content to the shopping cart directly instead of going to product page.
Static HTML tags for SEO purposes:
Integration with Styla's SEO API 8-16hrs
  • Static HTML data (meta tags, OG tags, static content in the "body" tag) from Styla SEO API is included in front-template of your page, which enables search engines to properly crawl the content there and display it in search results accordingly, even if they don't crawl JS-rendered content.
  • URLs for all Styla pages are provided in sitemap XML files for search engine robots to crawl, index and display.
  • Social media apps like Facebook can use OG tags for sharing magazine content (proper: image, title, lead text and URL for each story).

The options above can be handled step-by step, so your Styla content can first be launched with a limited set of them, for some other to be added later on. Once you've decided what you need, please read each section of the documentation linked to in the table. Then let's schedule a call with Styla's integration team for them to provide any help you might need and agree on your next steps.

Integration process steps

In general, the integration process should look like this (details depend on your setup):

  1. Styla sets up accounts for you (up to 3 days).
  2. You do the integration on your stage environment.
  3. Styla checks it and integrates with the data you provide (up to 3 days).
  4. In the meantime, Styla defines CSS for your Styla content so that fonts, colors, etc. are in like with the website appearance. This usually includes several rounds of feedback.
  5. You deploy the scope of the integration to your production environment (not linking to the Styla content).
  6. Styla switches the source of its product integration to your production, completes its final testing and gives its 'go' for the launch (up to 3 days).
  7. You add final touches to your Styla content - especially products from the production environment.
  8. You launch on your production ie. link to it.

Please stick to this process for the initial integration and any future updates as well. Of course, there's much more details to the process and they are covered in this documentation.

What you will need from Styla

  • Styla account IDs to use them for JS-embedding and requests to Styla APIs,
  • Styla users and passwords to log in to https://editor.styla.com/ and be able to create content and test product integration,
  • This documentation,
  • A call with Styla integration developers - please schedule one once you've read through the specs or send your questions via Email so that we can answer them. 

If any of this is missing, please contact Styla support. 

What Styla will need from you

  • URL(s) of the page(s) on which you embed your Styla content - we need to test them:
    • http user+password, if the website is password-protected,
    • whitelisting of Styla office IPs: 90.187.20.19366.249.76.56 if access to your stage website is limited based on IP.
  • Link(s) to your product feed file(s) (Google Product Feed, .csv, .xml or whatever else you use) or URLs of your API endpoints for Styla to source your product data from:
    • whitelisting of Styla Product API IPs: 52.2.252.181, 52.44.96.7 if access to your API endpoints is limited based on IP,
    • API keys in case your product data is protected (which is the default option on: Magento, SalesForce CC, Hybris, OXID).
  • Implementing our feedback, in case parts of the integration don't work as supposed to.

We will actively ask you for these later on.