We have a shiny, new BEE Plugin technical docs site.
You can find a new version of this page here
Sample code: embedding the editor
Here is some sample code to get you and up running in no time.
- Client-side example (HTML/JS)
- ASP.NET
- RAILS APP
- PHP - Community contribution - thank you!
- PERL 5, Dancer - Community contribution - thank you!
- Node.js - Community contribution - thank you!
- NPM JS - BETA, let us know how if you have any feedback.
Using the client-side example, you can literally try out BEE Plugin in 2 minutes...
- Download the client-side sample code: ClientSideImplementation
- Open clientSideImplementation/index.html with your favorite code editor
- Locate client_id and replace "YOUR_CLIENT_ID" with yours
- Locate client_secret and replace "YOUR_CLIENT_SECRET" with yours
- Save the file
- Open it in your browser and get creative
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.
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:
- 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.
- 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.
- 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.
both "client side" and "dot net" links point to the same files
Hi Rogelio, thanks for letting us know. We have corrected the problem.
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
A member of the BEE community recently contributed some PHP sample code. Please see: https://github.com/ProdigyView/beefree
Thanks for your contribution!
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?
Hi Gharmel,
the sample illustrates how to do a minimal setup of the plugin. The quick-send action needs later developments on your side.
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)
Hi Berry,
can you check that the placeholders YOUR_CLIENT_ID and YOUR_CLIENT_SECRET are correctly replaced with your own credentials?
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
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
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.
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
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..
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.
Big thank you to https://github.com/connoryates for submitting the Perl 5 + Dancer code sample! See: https://github.com/connoryates/bee_plugin
-
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!
Hi Marco, I've asked our dev team for some troubleshooting advice. I'll keep you posted.
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
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
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
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: https://support.beefree.io/hc/en-us/articles/360004495772-Initializing-the-editor-create-start-and-load
Some frequent doubts explained that may help you: https://support.beefree.io/hc/en-us/sections/360001287632-FAQs-on-BEE-Plugin
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..
Hi Prabhakar, that is correct. Server-side BEE Plugin configurations (https://support.beefree.io/hc/en-us/articles/360004546031-Server-side-configurations) - except for the AWS S3 Bucket feature - are only available on premium plans.
Hi Massimo,
Thank you. We might consider subscribing to a premium plan to get that feature working...
Thanks..
You can find a small nodejs implementation here:
https://gist.github.com/andrei-tofan/aa8bd4910035d8fd8c780bb9db6f337b
Hey Andrei, thanks for your contribution 👍
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?
Hi Paolo, the system uses the JSON part of the template to edit the message. The HTML part is the final/export format.
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