A simple module to use the BEE editor
Long story short: it's a drag-&-drop editor to author responsive design emails. It makes it 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 it into your application :) Using with the BEE free version, you can embed the editor anywhere, regardless of the pricing model.
- go to the developer portal https://developers.beefree.io/signup
- sign up with the free plan
- create your application
- get the clientId and the clientSecret
It's free to use on 'https://beefree.io': you don't even need to create an account of any kind.
- Install Nodejs (also npm, which should come with nodejs already).
- clone this repository
-
npm install
oryarn install
(if you have it installed) in the folder cloned - put your
clientId
andclientSecret
in ./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 authorized to start using the editor: beefree help documentation portal has a nice post explaining how to do it
It's not really raccomended to do it client side but it's possible with the module, just call getToken
import Bee from 'bee-plugin'
const beeTest = new Bee()
beeTest.getToken(clientId, clientSecret)
Initialize the BEE instance with a server side generated token
import Bee from 'bee-plugin'
const beeTest = new Bee(token)
It requires a configuration for using the editor, beefree help documentation portal has a nice post explaining how to do it
Here is an example of the configuration; just read the official documentation for an extended version
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 requires an 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(() => beeTest.start(beeConfig, template))
Initializes a class with the token that are stored on constructor
After the initizalization you can call start for creating the editor on the page; the method needs two parameters:
- BEE configuration (js object)
- Template (JSON)
this return a promise that has resolved after we call the plugin start function
This change the template: just call load
with the new template
This call BeePlugin save
, which in turn will trigger the callback onSave
defined on the configuration for getting fresh HTML of the email and the JSON template updated.
This call BeePlugin saveAsTemplate
, which in turn will trigger the callback onSaveAsTemplate defined in the configuration for getting only the current JSON of the instance.
This call BeePlugin send
, which in turn will trigger the callback send defined in the configuration for getting only the current html of the instance.
This call BeePlugin preview
which trigger the preview modal inside the editor.
This call BeePlugin toggleStructure
which toggle the structure helper on the editor's stage.
npm test
or
yarn test