Embed a Microsite

This tutorial illustrates how to embed a microsite in your Moovweb project. A microsite is a self-contained site, usually on a separate domain, with a single purpose.

Usually, with a Moovweb site you transform an existing website. However, this tutorial will show you how to create a completely new microsite and integrate it into your Moovweb mobile site. The microsite keeps the look and feel of the mobile site you set up, but has content only available on mobile.

Prerequisites: Building a Site tutorials, knowledge of external sites

Outline


Microsite Set Up

Firstly, you need to set up your microsite. In our example, we set up a simple survey site. The survey asks the user to upload a photo, then give feedback on some products. In return, the user gets a promotional code. Here is our app:

Our simplesurvey app

You can use any service you like to set up your microsite. We like using Parse as it has some great tutorials to help you get started. Our microsite can be visited here.

No matter what service you choose, once your microsite is up and running, you can begin to integrate it with your Moovweb project.

Embedding the Microsite

There are a few options to integrate the microsite into your Moovweb project:

In this example, we will create a new subdomain.

Our microsite is hosted on simplesurvey.parseapp.com. In the config.json file of your Moovweb project, you can set it up so that a subdomain of the site pulls information from this external site.

"survey.igadgetcommerce.com => simplesurvey.parseapp.com"

The link to the survey on your site should point to “survey.igadgetcommerce.com”.

Link points to subdomain

The user will then complete the survey at the subdomain before being redirected back to the regular domain of the site.

In order for this method to work, you would need to add an extra DNS entry for this subdomain when setting up the site.

For example, when setting up the current project, the following was entered into the DNS settings for the iGadgetCommerce site:

survey.igadgetcommerce.com => survey.igadgetcommerce.com.moovdns.net

If you do not want to set up a unique subdomain for the survey, you have two options (as mentioned above). You can create a unique path, using our advanced enterprise-routing features. Or you can use a combination of JSON and CORS.

Styling

Obviously, the main page of the survey isn’t styled. The page can be transformed and styled using Tritium and Sass much like any other Moovweb project. Generate a new .ts file and stylesheet for each page, then map the pages based on their paths and import appropriate Tritium scripts.

You can map to a unique subdomain by using the $host variable, rather than the $path variable used for path-matching. For example:

match($host) {
  with(/survey/) {
    @import pages/survey.ts
    log("--> Importing pages/survey.ts from matching the survey subdomain")
  }
}

Below, you can see the styled version of the microsite:

Styled version of the microsite