@mailupinc/bee-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1-alpha.0 • Public • Published

    alt bee-plugin-logo

    Official BEE plugin wrapper CI

    PRs Welcome License NPM

    A simple module to use the BEE editor

    Why BEE Plugin?

    Choose a reliable, easy to integrate multi-content type digital platform you can build on. BEE Plugin is more than an embeddable visual builder with a great drag-n-drop user experience. It’s a reliable, highly-customizable email, landing page & popup builder.

    Go from proof-of-concept to production in days, not months. BEE Plugin can be highly customized in the way it looks, what it does and how it interacts with your application. Deliver your business exactly what it needs, with a small development effort

    You can embed it into your application!

    Visit our developer documentation [https://docs.beefree.io/]

    How to use it

    Demo

    It's free to use on 'https://beefree.io': you don't even need to create an account of any kind.

    Do you want to try out an integration locally?

    1. Install Nodejs (also npm, which should come with nodejs already) or Yarn.
    2. clone this repository
    3. npm install or yarn install(if you have it installed) in the folder cloned
    4. rename the local .env.sample file into .env
    5. run npm start or yarn start
    6. Open http://localhost:8080.
    7. Have fun!

    How to use this module for your own

    install

    You can either install it with npm or yarn.

    npm install --save @mailupinc/bee-plugin

    or

    yarn add @mailupinc/bee-plugin

    Initialize the plugin

    Get token(clientId, clientSecret)

    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.

    Pass your credential on getToken method and start the plugin in the returning promise. Example below:

    import BeePlugin from '@mailupinc/bee-plugin'
    
    // put your credentials in the .env file
    const clientId = process.env.PLUGIN_CLIENT_ID
    const clientSecret = process.env.PLUGIN_CLIENT_SECRET
    const beeConfig = {...}
    
    const template = {...}
    const beeTest = new BeePlugin(token, authConfiguration)
    
    beeTest.getToken(clientId, clientSecret)
      .then(() => beeTest.start(beeConfig, template))

    new Bee(token, authConf?)

    Initialize the BEE instance with a server side generated token

    import BeePlugin from '@mailupinc/bee-plugin'
    
    const authConf = {...}
    const beeConfig = {...}
    const template = {...}
    
    // you can add you personal configuration, if you omit some properties, plugin will use it's default configuration
    const authConfiguration = {
      authUrl: process.env.YOR_AUTH_URL,
      beePluginUrl: process.env.YOR_HOST_PLUGIN_URL
    }
    const beeInstance = new BeePlugin(token, authConf)
    beeInstance.start(beeConfig, template)

    Configuring the editor (beeConfig)

    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)
      }
    }

    Template JSON

    It requires an initial template for start editing, learn more here

    Some json avaible here https://github.com/BEE-Plugin/BEE-FREE-templates

    After you have started the editor it's possible to trigger this methods

    Methods

    start(beeConfig, template, endpoint, options)

    After the initizalization you can call start for creating the editor on the page; the method needs two parameters:

    • BEE configuration (required - js object)
    • Template (required - JSON)
    • Endpoint (optional - string or null)
    • Options (optional - js object e.g. { shared: true })

    this return a promise that has resolved after we call the plugin start function

    load(template)

    This changes the template; just call load with the new template

    reload(template)

    This changes the template with trigging the loading dialog; just call reload with the new template

    save()

    This calls 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.

    saveAsTemplate()

    This calls BeePlugin saveAsTemplate, which in turn will trigger the callback onSaveAsTemplate defined in the configuration for getting only the current JSON of the instance.

    send()

    This calls BeePlugin send, which in turn will trigger the callback send defined in the configuration for getting only the current html of the instance.

    preview()

    This calls BeePlugin preview, which trigger the preview modal inside the editor.

    toggleStructure()

    This calls BeePlugin toggleStructure, which toggle the structure helper on the editor's stage.

    toggleComments()

    This calls BeePlugin toggleStructure, which toggle the comments section on the editor's sidebar.

    togglePreview()

    This calls BeePlugin togglePreview, which open/close the message preview behavior within the editor.

    showComment(uuid)

    This calls BeePlugin showComment, which opens a specific comment and scrolls the stage to the related element. The method needs one parameter, a comment 'uuid' as a string.

    loadConfig(ClientConfig)

    This calls BeePlugin loadConfig, which reloads the JSON configuration used to initialize the plugin.

    join(beeConfig, sessionId)

    After the initialization you can call join for creating the editor on the page and joining a collaborative editing session; the method needs two parameters:

    • BEE configuration (JS object)
    • SessionID (string obtained from onSessionStarted callback)

    this return a promise that has resolved after we call the plugin start function. Visit the docs for more details about co-editing.

    loadWorkspace(type)

    This call BeePlugin loadWorkspace, which accepts one of the following parameters: 'default'|'mixed'|'amp_only'|'html_only'. Visit the docs for more details about workspaces.

    loadStageMode(arg)

    This call BeePlugin loadStageMode, which accepts an object parameter with the following structure: { mode: 'desktop'|'mobile', display: 'blur'|'hide'}. Visit the docs for more details about design mode.

    loadConfig(ClientConfig)

    This calls BeePlugin loadConfig, which reloads the JSON configuration used to initialize the plugin.

    Install

    npm i @mailupinc/bee-plugin

    DownloadsWeekly Downloads

    5,855

    Version

    1.5.1-alpha.0

    License

    Apache-2.0

    Unpacked Size

    548 kB

    Total Files

    27

    Last publish

    Collaborators

    • mailupinc.2012
    • robmar
    • loriscabrini
    • gaggero
    • matt.weber.io
    • pinkynrg
    • riccardo.leschiutta