Sample code and templates

Sample code: embedding the editor

Here is some sample code to get you and up running in no time.

 

Using the client-side example, you can literally try out BEE Plugin in 2 minutes...

  1. Download the client-side sample code: ClientSideImplementation
  2. Open clientSideImplementation/index.html with your favorite code editor
  3. Locate client_id and replace "YOUR_CLIENT_ID" with yours
  4. Locate client_secret and replace "YOUR_CLIENT_SECRET" with yours
  5. Save the file
  6. Open it in your browser and get creative (smile)

To obtain your Client ID and Client Secret sign up here (it's free).

 

Sample code: file system provider

You can connect BEE Plugin to your own file system (e.g. to let users of your app find images where they already exist).

Python (Django)

The file below is a file system provider API built in Python. It's based on Django and connects BEE Plugin to an Amazon Web Services S3 bucket.

BEE-Plugin-Django-FSP.tar

Other programming languages

Coming soon!

 

Sample templates

Download, collaborate, and contribute: https://github.com/BEE-Plugin/BEE-FREE-templates

 

Don't forget...

To use any of the sample code mentioned above you will need to first create an application on developers.beefree.io/signup (i.e. the application where the editor will be embedded) and obtain your application keys.

Here is an example of the application details page where the application keys are found.

Other important notes about using sample code

Before using the code samples listed above in a production environment, please consider the following:

  1. The client-side sample is not safe for a production environment (it was conceived as a quick way for you to test the application). Someone would be able to easily steal your application credentials (just viewing the source code of the page). To keep those credentials safe, authorization must be managed sever-side, as the .NET sample does.
  2. These code samples use a limited set of features and configurations: they can be a good starting point to start developing around BEE, but they are not an exhaustive showcase of everything you can do.
  3. All sample code is provided "as is": it may contain defects, it may not follow best practices (although we try to!), and it should only be considered as point of reference.
Have more questions? Submit a request

Comments

  • Avatar
    Rogelio Alejandro Ortiz Sevilla

    both "client side" and "dot net" links point to the same files

  • Avatar
    Massimo Arrigoni

    Hi Rogelio, thanks for letting us know. We have corrected the problem.

  • Avatar
    Massimo Arrigoni

    Hi everyone, we just published sample code for a Rails app that wants to become supercool by embedding an awesome drag-and-drop email editor :-)
    See: https://github.com/mailup/bee-rails-app-example

  • Avatar
    Massimo Arrigoni

    A member of the BEE community recently contributed some PHP sample code. Please see: https://github.com/ProdigyView/beefree
    Thanks for your contribution!

  • Avatar
    gharmel

    I was trying the 2 minute client example and received a console error of "Uncaught SyntaxError: Unexpected end of input" when attempting to "Send test". Is that expected behavior with this limited example?

  • Avatar
    Guille Padilla

    Hi Gharmel,
    the sample illustrates how to do a minimal setup of the plugin. The quick-send action needs later developments on your side.

  • Avatar
    Berry Tsakala

    out of the box, the html/javascript example gives this error:

    POST https://auth.getbee.io/apiauth request @ index.html:73(anonymous function) @ index.html:168
    index.html:1 XMLHttpRequest cannot load https://auth.getbee.io/apiauth. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://abc.com' is therefore not allowed access. The response had HTTP status code 400.

    I then added this header to a php file, which just adds the following header:
    header("Access-Control-Allow-Origin: https://auth.getbee.io");
    and then just prints "index.html" as it is.

    but I got the same error. (p.s. I can see the header being sent in firebug)

  • Avatar
    Guille Padilla

    Hi Berry,
    can you check that the placeholders YOUR_CLIENT_ID and YOUR_CLIENT_SECRET are correctly replaced with your own credentials?

  • Avatar
    Berry Tsakala

    double-checked. here's my code:
    ...
    document.getElementById('choose-template').addEventListener('change', loadTemplate, false);

    var client_id = 'xxxxxxxxxx';   // mockup value for this forum post
    var secret = 'yyyyyyyyyyyyyyyyyy';    // mockup value
    var params = 'grant_type=password&client_id='+client_id+'&client_secret=' + secret;
    console.log(params);
    
    request(
      'POST', 
      'https://auth.getbee.io/apiauth',
      params,
      'application/x-www-form-urlencoded',
      function(token) {
    

    ...

    the param variable output is:
    grant_type=password&client_id=xxxxxx&client_secret=yyyyyyyyyyyyyyyyyy

  • Avatar
    Guille Padilla

    Hi Berry, I tested the sample code, also with your code, and all works fine.
    Can you check if third party cookies are blocked?

    I also published the sample code on GitHub, so people can fork it and collaborate with their own versions:
    https://github.com/BEE-Plugin/ClientSIde-code-sample

  • Avatar
    Amruta Lawand

    I want to download this bee plugin so that I can text it on my local and then upload it for live application. Now I have signed up for the free plan. Please guide me in this.

  • Avatar
    Massimo Arrigoni

    Hi Amruta, you can certainly do this. Just use the sample code that you can find on this page together with the Client ID and Client Secret that you obtained when you created an application on https://developers.beefree.io

  • Avatar
    shabbirk

    getting error as below while implementing in .NET Code

    1) Failed to load resource: the server responded with a status of 403 (Forbidden)
    https://eu-bee-resources.s3.amazonaws.com/plugin/BeePlugin.js

    2) Failed to load resource: the server responded with a status of 500 (Internal Server Error)
    http://localhost:54067/api/auth

    Please any one help me to solve this problem..

  • Avatar
    Sergio M.

    Hi Shabbir, thanks for opening a support ticket with us yesterday. We posted an updated version of the .NET code. Also, please make sure that you add your own Client ID and Client Secret from your BEE Plugin developer portal account.

  • Avatar
    Massimo Arrigoni

    Big thank you to https://github.com/connoryates for submitting the Perl 5 + Dancer code sample! See: https://github.com/connoryates/bee_plugin

  • Avatar
    inderdeep.singh
    Edited by inderdeep.singh
  • Avatar
    marco giorgi

    Hi
    I'm getting the following errors while running the .NET Code example
    1) Failed to load resource: the server responded with a status of 403 (Forbidden)
    https://eu-bee-resources.s3.amazonaws.com/plugin/BeePlugin.js
    2) Failed to load resource: the server responded with a status of 500 (Internal Server Error)
    http://localhost:54067/api/auth

    I've set client_id and client_secret on line 68 of BeeController.cs

    Please help me to solve this problem!

  • Avatar
    Sergio M.

    Hi Marco, I've asked our dev team for some troubleshooting advice. I'll keep you posted.

  • Avatar
    marco giorgi

    Ciao Sergio,
    Found the issue: https://eu-bee-resources.s3.amazonaws.com/plugin/BeePlugin.js hosted on amazon is not reachable, so I've replaced it with https://app-rsrc.getbee.io/plugin/BeePlugin.js and all is working fine. There's also a typo in the js "onsole" instead of console. Thanks
    Best,
    Marco

  • Avatar
    Guille Padilla

    Hi Marco, thanks for the feedback, our DEV team updated the code sample and upload it to a GitHub repository to facilitate maintenance 😊
    https://github.com/BEE-Plugin/AspNet-code-sample

  • Avatar
    Prabhakar Sonparote

    Hi,
    Thanks for such a wonderful editor. We are exploring it to use for a longer term. We have embedded bee editor plugin into our application. We are saving the template to database after creating in the editor. We will show a list of all such saved templates in a grid with an edit option to the user. Now, we would like to allow user to edit any of these templates to load again in the editor. Please advise, how can we reload the template in editor for making modifications. We noticed that Save button click gives a responsive html without any angular attributes in the content. If at all its possible to reload the template in the editor, not having the angular attributes in the html content would not reload it correctly right? Our attempt here is to mimic the Message List functionality that is available with Pro version of Bee editor.
    Looking forward for the reply...

    Thanks,
    NB

  • Avatar
    Guille Padilla

    Hi Prabhakar, the HTML is the message export format, a message ready to be sent.
    When you use the save action, you retrieve the JSON part. This is the editable version of the message that can be loaded and modified with the editor.
    See how to load a JSON in the plugin: http://help.beefree.io/hc/en-us/articles/203061361-Initializing-the-editor-create-start-and-load

    Some frequent doubts explained that may help you: http://help.beefree.io/hc/en-us/sections/201929242-FAQs-on-BEE-Plugin

  • Avatar
    Prabhakar Sonparote

    Hi Guille,
    Thanks for your reply. We did not check the documentation available on your site.It was mentioned there. One more quick question. We are not seeing the Html Content Block in the Content tab after integrating the plugin. Whereas we are seeing the same in beefree.io and pro.beefree.io. We are on a free subscription now for integrating the plugin. Do we need to upgrade to a paid subscription to see the Html block as well...Please advise..

    Thanks..

  • Avatar
    Massimo Arrigoni

    Hi Prabhakar, that is correct. Server-side BEE Plugin configurations (http://help.beefree.io/hc/en-us/articles/204783212-Server-side-configurations) - except for the AWS S3 Bucket feature - are only available on premium plans.

    Edited by Massimo Arrigoni
  • Avatar
    Prabhakar Sonparote

    Hi Massimo,
    Thank you. We might consider subscribing to a premium plan to get that feature working...

    Thanks..

  • Avatar
    Andrei

    You can find a small nodejs implementation here:
    https://gist.github.com/andrei-tofan/aa8bd4910035d8fd8c780bb9db6f337b

  • Avatar
    Guille Padilla

    Hey Andrei, thanks for your contribution 👍

  • Avatar
    Passera Paolo

    I downloaded and I'm testing the ClientSIde-code-sample version.
    I created a template that I saved and downloaded to HTML.
    I then tried to pass it to the bee.load function to recharge it but the system does not respond.
    I also tried moving it to the "Select template to load" bar in the example but did not load the file.
    Do I have to pass the file to some special format?

  • Avatar
    Guille Padilla

    Hi Paolo, the system uses the JSON part of the template to edit the message. The HTML part is the final/export format.

  • Avatar
    Mwspace LLC

    Hello,

    I would like to change some javascript features.

    1) onSave: function (jsonFile, htmlFile) {
    Save ('. Html', htmlFile);
    },

    I would like to create a save html file in a folder

    regards. Alex from MwSpace LLC

    Edited by Mwspace LLC