Nawmal trial referal

Usage

Using the react application.

Include the following script:

<script src="https://secure.nawmal.com/trial/bundle.js"/>

Then in the body include a div with an id "nml-trial-app" like so:

<div id="nml-trial-app"></div>

Then setup the app in a script (returns a Promise):

<script>
    var api = null;
    var promise = NawmalTrial.setup("ref-id", "public-key", {
        locale: "en",
        appOptions: {
            product: "edu"
        }
    }).then(function(val) {
        api = val;
    });
</script>

The app will now initialize and render inside the element with id nml-trial-app.

Style customization

nawmal-css use flex as the basis for it's layout. Flexbox guide

The following css classes are available:

  • nml-form -> outer container div
  • nml-form-inner -> where the inputs are rendered
  • nml-form-control -> div containing a label and an input
  • nml-btn-wicon, nml-form-submit -> the submit button.

Setup function signature

/* ES6 */
const defaultAppOptions = {
    product: null               // if null will default to `make`.
}

const defaultSetupOptions = {
    useReact: true,             // wether to use the react form or not
    callback: null,             // not used
    appDivId: 'nml-trial-app',  // the id of the element to bind the app to.
    mode: 'prod',               // the environment to call (for dev purpose)
    locale: null,               // if null or invalid will default to `en`
    appOptions: defaultAppOptions
}

const setup =  async (refererId, publicKey, options=defaultSetupOptions) => {
    /* code */
    return {
        newTrial: function(emailAddress, firstName, lastName, product, options={ callback: null}),
        store: {} //  redux store
    }
}

Using a custom form

  • Setup the app with options.useReact = false.
  • In the .then() promise chain get the reference to the newTrial function.
  • In your form onSubmit, call the function newTrial.
  • Get the results from the store: 
    /* ES6 */
  const state = store.getState()
  const { trial } = state
  `
  • The state object definition:
    {
      signingUp: false,       // while requesting a newTrial
      signedUp: false,        // success of newTrial
      initialized: false,     // Wait for this before calling newTrial
      initializing: false,    // While initialiazing
      error: null             // If an error happen a description will be available here.
  }

The setup and form should look something like this:

<body>
    <div id="nml-trial-app" class="nml-scope"></div>
    <script src="https://secure.nawmal.com/trial/bundle.js"></script>
    <script>
        var api = null;
        NawmalTrial.setup("ref-id", "publicKey", {
            useReact: false
        }).then(function(val) {
            api = val
        })

        function onSubmitTrial(e) {
            e.preventDefault()
            var email = document.getElementsByName('emailAddress')[0].value
            var firstName = document.getElementsByName('firstName')[0].value
            var lastName = document.getElementsByName('lastName')[0].value
            var product = 'make'

            function resolve() {
                if (!window.api) {
                    setTimeout(resolve, 500);
                } else {
                    api.newTrial(email, firstName, lastName, product)
                }
            }
            resolve()
        }
    </script>

    <form onsubmit="onSubmitTrial(event);" method="POST">
        <input name="emailAddress" />
        <input name="firstName" />
        <input name="lastName" />
        <button type="submit">submit</button>
    </form>
</body>

Localization

This app come with 2 locales defined.

  • en for english
  • fr for french

If you wish to contribute by adding a locale, please send us a json with the following fields:

{
    "trialForm": {
        "email": "Email address",
        "firstName": "First name",
        "lastName": "Last name",
        "product": "product",
        "description": "Please tell us a few things about yourself and we'll send you an email with the instructions on how to download nawmal%(product)s (Windows 7, 8 or 10) as well as your username and password.",
        "title": "Register for a trial with nawmal %(product)s",
        "submit": "submit"
    },
    "trialSuccess": {
        "title": "Success !",
        "message": "Thank you for trying out nawmal %(product)s, %(emailAddress)s should receive an email shortly with download instructions."
    }
}

Interpolations:

Fields with a %(somevar)s require that same pattern within.

 
Join our mailing list