A really simple module for use the BEE editor www.beefree.io
Long story short is a drag-&-drop editor for responsive design emails. It makes easy and quick to create a great-looking email message that can be used to send a company newsletter, announce a new product, promote a sale, etc.
You can embed into your application :) BEE have a free version so you can embed the editor anywhere, regardless of pricing model.
- go to developer portal 'https://developers.beefree.io/signup'
- sign up with the free plan
- create your application
- get clientId and clientSecret
It's free to use on 'https://beefree.io': you don't even need to create an account of any kind.
- Install Node and npm.
- clone this repository
npm install
oryarn install
in the folder cloned- put your clientId and clientSecret on ./config/integrationKeys.js
npm start
- Open
http://localhost:3030
. - Have fun!
npm install --save bee-plugin
or
yarn add bee-plugin
You need to be authorize to start with the editor, learn more here
It is not raccomended to do it client side but is possible with the module, just call getToken
import Bee from 'bee-plugin'
const beeTest = new Bee()
beeTest.getToken(clientId, clientSecret)
initialize the instance of BEE with a token generate server side
import Bee from 'bee-plugin'
const beeTest = new Bee(token)
It required a configuration for using the editor, learn more here
Here an example of configuration, read the official documentation for extended
const beeConfig = {
uid: 'test1-clientside', //needed for identify resources of the that user and billing stuff
container: 'bee-plugin-container', //Identifies the id of div element that contains BEE Plugin
language: 'en-US',
onSave: (jsonFile, htmlFile) => {
console.log('onSave', jsonFile, htmlFile)
},
onSaveAsTemplate: (jsonFile) => {
console.log('onSaveAsTemplate', jsonFile)
},
onSend: (htmlFile) => {
console.log('onSend', htmlFile)
},
onError: (errorMessage) => {
console.log('onError ', errorMessage)
}
}
It required a initial template for start editing, learn more here
Some json avaible here https://github.com/BEE-Plugin/BEE-FREE-templates
Pass your keys on parms and return a promise, example:
const clientId = 'MYclientId'
const clientSecret = 'MYclientSecret'
const beeConfig = {...}
const template = {...}
const beeTest = new Bee()
beeTest.getToken(clientId, clientSecret)
.then(() => {
.then((res) => res.json()) //return fetch promise
.then((template) => beeTest.start(beeConfig, template))
})
Initialize a classe with token that are store on constructor
After the initizalization you can call start for create the editor on page, the method need two params:
- BEE configuration (js object)
- Template (JSON)
After you have started the editor is possible to change the template, just calling load with the new template
After you have started the editor is possible to trigger the save that trigger the callback onSave define on the configuration for getting fresh HTML of the email and the json template updated.
After you have started the editor is possible to trigger the saveAsTemplate that trigger the callback onSaveAsTemplate define on the configuration for getting only the current json of the instance.
npm test
or
yarn test