@onereach/webform

Content Builder includes several views for: - Content builder view itself; - Web Form view; - Slack block-kit builder;

Usage no npm install needed!

<script type="module">
  import onereachWebform from 'https://cdn.skypack.dev/@onereach/webform';
</script>

README

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>
  • ./src/main.ts - app start point. We try to integrate ts. // TODO: intergate ts to components.

Dev process

  1. npm install
  2. npm run dev (served dev and dev:lib)

or

  1. or run [env] .

Build process

  1. npm run build - build lib and app files
  2. If you want to update lib version, in package.json increment version and run command: npm publish

Deploy

  1. or deploy [env] .