Getting Started

What are Web Integrations?

Web Integrations are a way to integrate Mariana Tek features into your existing website. It enables customers to manage their account, buy memberships & credits, browse class schedules, and book classes without leaving your website.

Setup

Web Integrations requires two things on a page in order to load: a small javascript snippet and an HTML element with the data attribute data-mariana-integrations.

If you are upgrading from the previous version of Web Integrations, please read our Upgrade Guide

Javascript Snippet

The javascript snippet sets up all of the functionality necessary to run Web Integrations on your website and it must be present for them to load. The following javascript snippet should be added to the footer of your website, right before the closing body tag, on every page of your website. Note: you must replace example-tenant-name with your real tenant name.

<script>

(function () {

// Set tenant name here

var TENANT_NAME = 'example-tenant-name';

var d = document;

var sA = ['polyfills', 'js'];

for (var i = 0; i < sA.length; i++) {

var s = d.createElement('script');

s.src = 'https://' + TENANT_NAME + '.marianaiframes.com/' + sA[i];

s.setAttribute('data-timestamp', +new Date());

(d.head || d.body).appendChild(s);

}

})();

</script>

<noscript>

Please enable JavaScript to view the

<a href="https://marianatek.com/?ref_noscript" rel="nofollow">

Web Integrations by Mariana Tek.

</a>

</noscript>

What does the Javascript snippet do?

The javascript snippet loads two javascript files. The first are the polyfills needed for Web Integrations to run properly in all browsers. This file dynamically loads only the polyfills necessary for the user’s browser, so for most users there should be virtually nothing loaded. The second file is the rest of the javascript needed to load Web Integrations on your site. This file includes the logic which loads the Web Integrations iframe on your page.

The HTML Snippet

The HTML snippet is the container for Web Integrations. Wherever you put it is where the Web Integrations will load. We recommend that you create a separate page for each of these snippets.

Web Integrations has three major sections:

• Login/Account Management
• Class Schedules
• Buy pages

Login/Account Management

The following account integration HTML snippet should be added to an account page on your website. Here the user will be able to create an account, login/out, edit their personal information, see upcoming reservations, etc.

<div data-mariana-integrations="/account"></div>

Click for Gallery of Screenshots

My Account:

Create Account:

Log In:

Schedule and Buy Page Setup Options

There are two general options when it comes to setting up the class schedule and buy pages on your website and how it relates to your locations.

Option 1: Separate Location Pages

Create separate, dedicated pages for each location's schedule and buy page.

Read more about setting up separate location pages

Option 2: Single Page with Location Selector

Create a single schedule page and a single buy page which encompass all locations.

Read more about location selector page setup

Click for Gallery of Screenshots

Buy Page:

Schedule:

Location Selector Page: