@walnut-software/email-builder

Email-builder

An easy to use light-weight javascript email template builder Build for the walnut-software email-builder-backoffice (composer package comming soon)

Installation

npm i @walnut-software/email-builder --save

then...

import editor from '@walnut-software/email-builder'

Usage

Default configuration

editor.init({
    'form' : 'form_gjs', // default
    'container' : 'gjs', // default
    'token' : 'token', // required
    'uuid' : 'uuid', // used to get & update a template -- remove to start a new template
    'color' : 'white', // default
    'buttonBackground' : '#414141', // default darkGray
    'buttoncolor' : '#ffffff', // default white
    'modals' : true, // feedback popups - default true
    'mergeTags': [{"tag": "*|first_name_tag|*"}], // use mail merge tags
});

And...

<div style="height: 50rem">
    <div class="row" style="height:100%">
      <div id="style-manager" class="column" style="flex-basis: 500px">
        <ul class="flex justify-center tab tab-block">
          <li class="w-full text-center tab-item active" data-panel-type="content">
            <button type="button" style="width: 100%">Content</button>
          </li>
          <li class="w-full text-center tab-item" data-panel-type="styles">
            <button type="button" style="width: 100%">Styles</button>
          </li>
        </ul>
        <div id="content" class="tab-content">
          <div id="blocks"></div>
        </div>
        <div id="styles" class="tab-content" style="display:none;">
          <div id="selectors-container"></div>
          <div id="traits-container"></div>
          <div id="style-manager-container"></div>
        </div>
      </div>
      <div class="column editor-clm">
        <div id="gjs">

        </div>
      </div>
    </div>
    <button type="submit" id="form_gjs">Submit</button>
    <button type="button" id="reset_gjs">Reset</button>
</div>

#gjs is the default container and default accent colors are white these can be changed

Custom configuration

editor.init({
    'form' : 'form_button_name',
    'container' : 'container_name',
    'color' : 'blue',
});

Or...

editor.init({
    'form' : 'form_button_name',
    'container' : 'container_name',
    'color' : '#0ea5e9',
});

And...

<div style="height: 500px">
    <div id="container_name"></div>
    <button type="submit" id="form_button_name">Submit</button>
</div>