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.

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.

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.

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.

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.

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.

• 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. 

• 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.193, 66.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.