@onereach/webform NPM

Content Builder App

Content Builder includes several views for:

Content builder view itself;
Web Form view;
Slack block-kit builder;

Structure of project source:

./src/assets - scss, fonts, images files (static stuff)
./src/components - for each view / channel create specific folder. You could use components from common folder in any view or component
📦 components
┣ 📂 common
┣ 📂 content-builder
┣ 📂 slack
┗ 📂 webform
./src/constants - labels and texts constants.
// TODO - all labels and text have to be brought to constants
./src/data - Static data. Channels components structure.

alt text

{
  "web": [
    {
      "type": "input", // name of auto imported component field.
      "props": {
        "icon": "input", // (1) name of icon from https://material.io/
        "label": "Input", // (2) just a visible lable for user
        "helpText": "Input element", // (3) help text (visible on hover)
        "codeMode": true // (4) ability to use codemode for one field
      }
    },
    ...
  ],
  "slack": [
    ...
  ],
  ...
}

./src/helpers - just js helpers.
./src/mixins - just vue helpers mixins.
./src/router - just Vue router (https://router.vuejs.org/). If you want to create a new view, don't forget to add the path to the router and restart dev server.
./src/store - app vuex.
./src/utils - just js helpers. // TODO merge this folder with helpers.
./src/views - this app is created for several projects which connected to content builder.
./src/lib.js - this file create wrapper around webform view and published as npm package for usage as library in html scripts or in vue / reac component.

// Sample of usage of webform
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- Google icons css file -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body> 
  <!-- Container for rendering app -->
  <div id="form"></div>

  <!-- Sample of submit button -->
  <div>
    <button id="submitButton">
      Submit
    </button>
  </div>
 
  <!-- Webform script -->
  <script src="https://unpkg.com/@onereach/webform@latest"></script>

  <script>
    // You can use this app in simple html file or any js component
    const options = {
      selector: '#form',
      formUrl: 'https://cbuilder.staging.onereach.ai/webform/3da948b0-15cc-459e-8dae-a6673d0b2b40/ZGIwMTc3MTctN2UwYy00ZmJlLWI0NjYtZDQwMTc1ZDM3MTNm',
      hideSubmitButton: false // show or hide submit button in webform App
    }

    // Create new instance and pass options
    const form = new oneReachWebForm.default(options);

    // Callbacks for events
    const loaded = () => {
      console.log('Loaded');
    }

    const onSubmit = () => {
      console.log('onSubmit');
    }

    const onSubmitSuccess = ({ result, formData }) => {
      console.log('onSubmitSuccess', { result, formData });
    }

    const onSubmitError = (error) => {
      console.log('onSubmitError', error);
    }

    // Subscrine on events
    form.on('on-webform-loaded', loaded);
    form.on('on-webform-submit', onSubmit);
    form.on('on-webform-submit-success', onSubmitSuccess);
    form.on('on-webform-submit-error', onSubmitError);

    // Emit event
    const submitButton = document.querySelector('#submitButton');
    submitButton.addEventListener('click', () => {
      form.emit('emit-webform-submit')
    })
  </script>
</body>
</html>