Installing Web Integrations

What are Web Integrations?

The Mariana Web Integrations are the way to seamlessly include our product into your existing websites. It has four ingredients: a script tag, configuration object, a linked stylesheet and various markup tags. Some of the markup tags require minor configuration to link the app to your data, however, if you don't have access to it, we provide test data for you to work with.

The script file and stylesheet are served using semantic versioning; for example, you will be implementing the latest version of the library (version 3) by specifying 3.*.* in the semver query parameter. It will ensure any new releases (features/bug fixes) will automatically be served. If you want to minimize this variability, you can lock in specific versions.

Some of the steps of adding the integrations require more configuration than others. The aim of this document is to clarify those steps as well as provide suggestions, helpful tips and best ways to make the transition as easy as possible for everyone involved.

1. Add Configuration Values

The web integrations JavaScript file will look for a globally defined variable called MT_CONFIG to know how to connect to Mariana’s API. This variable must be defined before the JS library initializes. We recommend placing the MT_CONFIG snippet in the footer of the page above any other JS blocks, including the script file referenced in step 2. This needs to be completed for every page that integrates with Mariana Tek.

During development, you may use the following configuration which connects with a sandbox API:

<script>
var MT_CONFIG = {
    subDomain: 'YOUR_ACCOUNT_NAME_HERE',
};
</script>

We will provide you production credentials when you are ready to go live.

2. Add Script File

Place the reference to the script file below the configuration values. It should be placed at the bottom of every integrated page (preferably in the footer) after all other JS scripts and libraries to minimize potential compatibility issues:

<script src="https://integrations.marianatek.com/lib/mariana_web_integrations/3.*.*.js" charset="utf-8"></script>

3. Add Stylesheet

The stylesheet link should be placed in the header of every page integrated with Mariana Tek. Add this stylesheet before your stylesheets so you can easily theme the integrations.

<link rel="stylesheet" href="https://integrations.marianatek.com/lib/mariana_web_integrations/3.*.*.css">

4. Create pages

The integrations need places to live, so you'll need to create the following pages on your website for integrations to live on. The URLs can be whatever you like as those are fully configurable within the integrations. If you already have a page that corresponds to the list item, you can skip it.

  • My Account
    • My Classes
    • My Purchases
  • Create Account
  • Login
  • Password Reset
  • Schedule (you will need one page per location)
  • Buy Page (one page per location)
  • Checkout (one page per location)

Depending on the technology you're working with and the number of locations a gym has, you may want to create templates for numbers 6-8.

5. Add Integration Markup

There is a complementary integration for each of the of pages you created. You will need to add the integration markup to each page, the details for each have been separated for clarity purposes and can be found on the following pages:

  1. Create Account Integration
  2. Login Integration
  3. Authentication Integration
  4. Log Button Integration
  5. My Account Integration
  6. Password Reset Integration
  7. Schedule Integration
  8. Buy Page Integration
  9. Checkout Integration

The order of integration implementation is not mandatory but is arranged in a way that would, hopefully, make the most sense and is easier for you. Make certain to update the values on each integration to paths that reflect the structure of your website.

6. Theme Your Integrations

Out of the box the integrations won't look like much beyond layout, you'll want to follow our documentation in order to theme your integrations with colors and typography that matches your brand.

7. Update configuration with live values

You will be able to style and test your integration with the testing configuration we provided you. Once we have received all the information we need in order to initiate a new company's account we will then provide you with Location and Region IDs for the location specific integrations.

My Account Integration →