Initializing the editor: create, start, and load

Create

Once you have defined how you want to configure the editor, including optional parameters such as special links, merge tags and merge content, you can then initialize it with the following:

BeePlugin.create(token, beeConfig, function(beePluginInstance) {
});

... where:

Start

The create method returns an instance of BEE plugin which you can start using the .start() function.

To start the plugin:

beePluginInstance.start(templateToLoad);

Note that the .start() function can be called without the template parameter.

Load

In that case BEE will wait until a valid JSON template file is loaded using the .load(templateToLoad) function.

For example...

beePluginInstance.load(templateToLoad);

... where templateToLoad is the JSON file to be loaded when the editor is displayed. You can find sample code and templates here.

Next step

Get started faster with sample code and templates.

Have more questions? Submit a request

Comments

  • Avatar
    admin

    What does "templateToLoad is the json file to be loaded" means?
    Do I have to give to the function the template JSON string? Or the Json Object? Or an url or path pointing to the JSON file?
    And which json template can I use for starting?

  • Avatar
    admin

    Ok I get a way for making it work:

    BeePlugin.create(
        beeAuth, 
        beeConfig, 
        function(beePluginInstance) {
            $.ajax({
                url:'https://rsrc.getbee.io/api/templates/m-bee',
                success: function (data){
                    var templateString = data;
                    var template = JSON.parse(templateString);
                    beePluginInstance.start(template);
                }
            });
        }
    );
    
  • Avatar
    mwaa

    Is there a way to refresh the instance? or template that is loaded? I am working with angular and each time after saving template and go to editor i get an error from the plugin. I am forced to hard refresh the page so that the editor can work again

  • Avatar
    Guille Padilla

    Please, can you post here the error you receive.
    To change template/message you can use the .load() function to pass a different template to the editor.

  • Avatar
    Jeremy Rochot

    Hi guys, after initialising the editor and loading a template, is there a way for the user to "clear all" the editor without clicking on every bins of every components ?

  • Avatar
    Massimo Arrigoni

    Hi Jeremy: there is no way to do so, but you can load a very minimalist template (or even an empty one). So one of the options that you could make available to the user in your UI could be "Start from scratch" (or alike), and load an empty template.

  • Avatar
    Daniel

    Hey there!
    I am experiencing something odd.
    Some minutes after loading Bee Plugin, I get an error 401 Unauthorized from https://configuration.getbee.io/v1/api/configuration., when trying to load a template.

    Is something related to my authorization token? Does it expire after some time?
    Thank you.

  • Avatar
    Daniel

    Just to clarify... If I load a template just after loading the plugin it works perfectly. I just experience this behaviour if I try loading minutes later.

  • Avatar
    Daniel

    I have done a little bit of debugging and I am 99% sure that the cause of my problem is because the token expires.
    How can I set the expiration time to null or more than just 1 minute?
    Having to start the plugin demands time and I really dont find it necessary to start the plugin everytime I need to load a new template.

    Hope someone can help me.
    Thank you

  • Avatar
    Massimo Arrigoni

    Hi Daniel, when the editor is being used, the token is refreshed automatically. Please contact us at support at beefree dot io so that we can better understand the workflow in your application and suggest a solution.

  • Avatar
    silas

    help! its not working... i get load screen and after that i get an red line with this text `Errors in BEE Plugin configuration.`.

    My Code Here:

    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
    if (req.readyState === 4 && req.status === 200) {
    // Obtain token
    var token = JSON.parse(req.responseText);
    var beeConfig = {
    uid: 'CmsUserName', // [mandatory] identifies the set of resources to load
    container: 'bee-plugin-container', // [mandatory] the id of div element that contains BEE Plugin

    };

    // Call create method and pass token and beeConfig to obtain an instance of BEE Plugin
    BeePlugin.create(token.access_token, beeConfig, function(beePluginInstance) {
    // Call start method of bee plugin instance
    // beePluginInstance.start(template); // template is the json to be loaded in BEE
    $.ajax({
    url:'https://rsrc.getbee.io/api/templates/m-bee',
    success: function (data){
    var templateString = data;
    var template = JSON.parse(templateString);
    console.log(template);
    beePluginInstance.start(template);
    }
    });
    });
    }
    };
    req.open(
    'POST', // Method
    'blablabla', // The server side endpoint that calls BEE REST auth endpoint
    false // sync request
    );
    req.send();

    beefree plugin


  • Avatar
    silas

    Found my awnser here:
    http://help.beefree.io/hc/communities/public/questions/201527732-Problem-integrating-BEEPlugin

    The entire token must be passed, not only the access_token.

  • Avatar
    Sergio M.

    Hi Silas, glad that you found an answer on our community pages! If you have any questions, you can also open a support ticket via your BEE Plugin developer portal or contact us at support [at] beefree [dot] io

  • Avatar
    Attila Dobi

    Hi!

    How can I initialize the bee plugin editor with en empty template?

  • Avatar
    Guille Padilla

    Hi Attila, start the plugin with a random template and delete all the structures. Once you only have a single placeholder on the stage, save the message and use the generated JSON as empty template.

  • Avatar
    Attila Dobi

    Hi Guillermo,

    Thanks for the quick answer, I will try it.

  • Avatar
    Mailzak

    Hi,

    How can I load html file or code in the editor?

    Best

  • Avatar
    Guille Padilla

    Hi, the editor uses a template system based on JSON, instead of HTML, to maintain all the available options, update it, and keep things fast and smooth. If you need to add custom HTML you can use the HTML content block described here: http://help.beefree.io/hc/en-us/articles/207001729-Working-with-custom-HTML

  • Avatar
    silas

    Hi,

    Me BeePlugin works in chrome but not in firefox.
    I get this:
    Container not specified or invalid. Application cannot start. loader:1:2742

    I don't know why but v.container = undefined

    it fails on this:

    BeePlugin.create(token, beeConfig, function (beePluginInstance) {

    if i download the loader.js and change:

    o(i, t, e), y = document.getElementById(v.container), y ? i ? f(t, e, n) : p(t, e, n) : console.error("Container not specified or invalid. Application cannot start.")

    TO:

    o(i, t, e), y = document.getElementById('bee-plugin-container'), y ? i ? f(t, e, n) : p(t, e, n) : console.error("Container not specified or invalid. Application cannot start.")

    i still get:
    Container not specified or invalid. Application cannot start.

    my code:

    <html>
    <head>
    <title>beefree plugin</title>
    <script src='https://app-rsrc.getbee.io/plugin/BeePlugin.js' type='text/javascript'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
    <script>


    var req = new XMLHttpRequest();
    req.onreadystatechange = function () {
    if (req.readyState === 4 && req.status === 200) {
    // Obtain token
    var token = req.responseText;
    var specialLinks = [{
    type: 'unsubscribe',
    label: 'SpecialLink.Unsubscribe',
    link: 'http://[unsubscribe]/'
    }, {
    type: 'subscribe',
    label: 'SpecialLink.Subscribe',
    link: 'http://[subscribe]/'
    }];
    var mergeTags = [{
    name: 'First Name',
    value: '[first-name]'
    }, {
    name: 'Latest order date',
    value: '[order-date]'
    }];
    var beeConfig = {
    uid: 'CmsUserName', // [mandatory] identifies the set of resources to load
    container: 'bee-plugin-container', // [mandatory] the id of div element that contains BEE Plugin
    autosave: 30, // [optional, default:false] in seconds, allowed min-value: 15
    language: 'en-US', // [optional, default:'en-US'] if language is not supported the default language is loaded (value must follow ISO 639-1 format)
    specialLinks: specialLinks, // [optional, default:[]] Array of Object to specify special links
    mergeTags: mergeTags, // [optional, default:[]] Array of Object to specify special merge Tags
    // mergeContents: mergeContents, // [optional, default:[]] Array of Object to specify merge content
    preventClose: false, // [optional, default:false] if true an alert is shown before browser closure
    onSave: function (jsonFile, htmlFile) { }, // [optional]
    onSaveAsTemplate: function (jsonFile) { /* Implements function for save as template */
    }, // [optional]
    onAutoSave: function (jsonFile) { /* Implements function for auto save */
    }, // [optional]
    onSend: function (htmlFile) { /* Implements function to send message */
    }, // [optional]
    onError: function (errorMessage) { /* Implements function to handle error messages */
    } // [optional]
    };
    var token = JSON.parse(token);
    // Call create method and pass token and beeConfig to obtain an instance of BEE Plugin
    BeePlugin.create(token, beeConfig, function (beePluginInstance) {
    // Call start method of bee plugin instance
    // beePluginInstance.start(template); // template is the json to be loaded in BEE
    $.ajax({
    url: 'https://rsrc.getbee.io/api/templates/m-bee',
    success: function (data) {
    var templateString = data;
    var template = JSON.parse(templateString);
    beePluginInstance.start(template);
    }
    });
    });
    }
    };
    req.open(
    'POST', // Method
    'http://mydomain.eu/beefree/php/token/index.php', // The server side endpoint that calls BEE REST auth endpoint
    false // sync request
    );
    req.send();


    </script>
    </head>
    <body>

    <div id="bee-plugin-container">
    </div>

    </body>
    </html>
    Edited by silas
  • Avatar
    Attila Dobi

    Hi,

    Is there a way to subscribe to editor events: start, template loaded, etc?

  • Avatar
    anurag

    Hi Guille,

    Is there a way to customize the loader i.e. the progress bar that is shown while bee template builder is loaded?

  • Avatar
    Guille Padilla

    Hi anarug, currently there is no option to customize it.
    Attila, not yet, but it seems an interesting feedback.