mg-forms

This project was bootstrapped with Create React App.

MG-Forms

Application web et plugin Javascript permettant la création de pop-ups de devis / qualification / leadgen sur mesure.

Les données de structure des formulaires et méta-données sont persistées sur l'API de Contentful : https://app.contentful.com/spaces/n3fqi1ufw4d2

L'application Web utilise l'API contentful-management qui permet de manipuler les ressources : https://contentful.github.io/contentful-management.js/contentful-management/5.11.0/

Le script JS, quant à lui, utilise le SDK contentful content delivery : https://contentful.github.io/contentful.js/contentful/7.10.0/

Pré-requis

• Node.JS
• Yarn

Dépendances majeures

• React (Create-React-App)
• Bootstrap (Reactstrap)
• PropTypes

Available Scripts

yarn start

Lance l'admin en mode développement (auto-reload, non-minifié, etc.). Par défaut, utilise le port 3000.
Par défaut lancé en HTTPS (requis pour le SSO Contentful).

yarn build

L'action build va lancer en parallèle les actions build:app et build:sdk. Les deux vont écrire dans le répertoire /build.

Testing

Une page /tester.html permet de tester le fonctionnement du SDK.

SDK API

Le SDK déclare une classe MGFormLoader sur l'objet window. Cette classe est instanciée avec les paramètres suivant :

const loader = new MGFormLoader({
  contentfulParams: {
    space: "n3fqi1ufw4d2",
    accessToken: "byDuC5n8v18DCyMknlbwDS6nDuRO3Hrl-LF1lsySwos"
  },
  userId: "ft1xqb2345",
  onReady: function() {}
});

Attention pour Contenful, l'accessToken correspond à une API key pour l'API content-delivery (Settings / API Keys)

Cette classe est responsable de la récupération des configurations de formulaires sur Contentful et détermine, en fonction de la pondération des différents formulaires, quel formulaire afficher.

Une fois le FormLoader instancié, celui-ci expose une méthode createForm qui prend les paramètres suivants :

loader.createForm({
  type: 'express',
  onStepEvent: function(event) {
    console.info("Step Event", event);
  },
  onComplete: function(value) {
    console.info("Form Complete", value);
  },
  onChange: function(value) {
    console.info("Form value Change", value);
  },
  onMount: function() {
    console.info("Form mounted");
  },
  value: {
    product_id: 1234
  },
  container: document.getElementById("mount")
});