Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
From the moment Beefree’s first email builder was released to the public, people started asking for new “things” to be available in the Content tab, so that they would be able to do more with the drag-and-drop editor.
Like inserting a countdown timer in a promotional email, or a QR code in an event ticket reminder, or live weather on a landing page.
They wanted to be able to go from this…
… to this:
… so that additional features are available in Beefree’s editors to build richer emails, landing pages, popups, and other digital content.
Beefree SDK is used by over 600 software companies in all kinds of industries. Through their applications, hundreds of thousands of marketers create countless emails and landing pages, which reach millions of people.
With AddOns, richer emails and landing pages can be created, and everybody wins:
The people that receive those emails or view those pages, have a better experience.
The marketers that create them, have more ways to engage their audience.
The applications that embed Beefree’s builders can give those marketers better tools.
The AddOn providers reach more marketers through those apps.
And all of the above creates an overall more successful community around Beefree.
You can either use AddOns that have been built by other companies or build new ones.
If you wish to build an AddOn, you can either build an AddOn that’s just for you, and one that is available to any application that uses Beefree SDK. We call the former Custom AddOns, and the latter Partner AddOns, as companies partner with us to extend the core functionality of Beefree’s content builders.
This feature is available on Beefree SDK's Superpowers plan and above. If you're on the Core or Essentials plan, upgrade a development application for free to try this and other Superpowers-level features.
To add your own content tiles to the Content tab in a Beefree editor, you will need to develop a Custom AddOn.
For example, say your application is an event marketing system and you want your users to be able to drag-n-drop a QR code into an email. The QR code is generated by your event marketing system when the email is sent. The feature only works for your application. That’s a Custom AddOn.
For details on developing Custom AddOns, see AddOn Development.
This is an advanced feature that requires the Superpowers plan. Of course, you can test it in a development environment at no extra charge, if you wish to do so.
This feature is available on Beefree SDK's paid plans only.
There is a growing library of Partner AddOns for Beefree SDK customers, and there are more in the works. All these AddOns are available in a public directory inside the Beefree SDK Console. Application developers that have embedded a Beefree builder are able to quickly select and install any of those AddOns.
Interested in partnering with us? Learn how to submit a Partner AddOn.
Here is how you can locate and install ready-to-go AddOns:
Access the directory from within the Beefree SDK Console, from the Details page of any application that you have created.
Browse the list. These AddOns can help your end-users with things like countdown timers, dynamic maps, personalized cards, etc.
Install any AddOn with just a few clicks. Please note that some AddOns will require that you become a customer of the AddOn provider and obtain an API key.
For more, see Using AddOns.
Beefree SDK includes Partner AddOns and Custom AddOns. Learn more about the current AddOn offering within Beefree SDK, and how to create your own AddOn in the following sections:
This feature is available on Beefree SDK Superpowers plan and above. If you're on the Core or Essentials plan, upgrade a development application for free to try this and other Superpowers-level features.
A Custom AddOn is an addon that you typically developed for your own use.
Partner AddOns start as Custom AddOns, but are then published to the Partner AddOn Directory, becoming available to all applications that have embedded Beefree SDK.
Most Custom AddOns do not become Partner AddOns and therefore are not published to the Directory. That’s because, in most cases, you create a Custom AddOn to satisfy a use case that is specific to your application.
An example to clarify what we mean.
Let’s say you embedded our email editor in your event engagement platform, which has a feature that allows event marketers to insert an event ticket’s QR code in marketing campaigns sent to create more engagement around an event.
You want those marketers, users of your platform, to be able to easily include a QR code in the emails they send to remind people about the event. That way ticket holders can use the QR code to quickly get into the event venue.
So you decide to create a “QR Code” addon: “QR Code” becomes a new tile in the Content tab in the editor.
Marketers drag and drop the tile, click on Select event to indicate which event the QR is for, and use the editor to style that section of the message (e.g. size, padding, etc.).
The QR code is created dynamically by your platform, at the time the email is sent to a ticket buyer.
The feature is specific to your application.
Custom AddOns are an advanced feature. As a result, the feature is available on the following plans:
Superpowers
Enterprise
Of course, there are exceptions to this requirement.
Testing: if you are not yet on a Superpowers or Enterprise plan, and you want to test building a Custom AddOn:
Create a development application.
Request an upgrade to the Superpowers plan.
Test as much as you want. If and when you decide that you wish to deploy your Custom AddOn in production, we will ask you to upgrade your production application to the Superpowers or Enterprise plan.
Development of a Partner AddOn:
You provide features that could be a good fit as an extension of our editors
You are not a Beefree SDK customer
Log into the Beefree SDK Console and locate any application that is on the Superpowers or Enterprise plans. Click on Details to navigate to the application details page. In the lower part of the page, locate the Application configuration section and click on AddOns.
You will be taken to a page that lists the addons that have been installed for this application. Since you are just getting started, the list is likely empty. Click on Create a custom addon to start the process of creating a Custom AddOn.
Refer to the AddOn Development documentation for all the details on building your addon.
A Partner AddOn is an AddOn that you developed for any Beefree SDK customer that wishes to take advantage of it.
You created it to provide end-users of any application that has embedded Beefree SDK with new features that extend the builder. Any Beefree SDK customer will see it and will be able to install it, as Partner AddOns are listed in the Partner AddOn Directory.
A Partner AddOn starts as a Custom AddOn, but is then listed in the Partner AddOn directory (see below for listing requirements). To get started, you will need to follow the AddOn Development documentation and create a Custom AddOn for a fictitious Web app that has embedded Beefree SDK.
Please note that because Partner AddOns by definition live outside of the Beefree SDK application that will use them, you must select the external iframe method for development.
You can submit your AddOn to be listed in the Beefree SDK Partner AddOn Directory, so that other applications that have embedded Beefree SDK can take advantage of it.
You will be completely in charge of the business relationship with those companies, who will become your customers. We are not part of that relationship, other than being an enabler of it.
The following is a list of requirements for getting an AddOn listed in the Partner AddOn Directory:
You have signed the Beefree SDK AddOn License and Distribution Agreement. Contact your Account Manager or log in to the Beefree SDK Console and submit a ticket for details.
You have built an AddOn that:
uses the External iFrame Method (see AddOn Development)
uses the optional health check endpoint
You have thoroughly tested the AddOn before submitting to our test for final review.
You have a demo of the AddOn that we can access.
When you have checked off all of the above, contact your Account Manager or log in to the Developer Portal and submit a ticket to complete the review and approval process.
Welcome to the Beefree SDK AddOn development documentation!
This document is for anyone that wants to start creating AddOns for Beefree SDK users.
Before you get started, you may want to review these frequently asked questions.
Happy coding!
First, create a development application so that you are not testing your new AddOn with a production application.
Development applications inherit the plan of the production application to which they are connected. You can only build AddOns when you are on the Superpowers plan or above. If you are not on one of those plans:
Create a development application
Request an upgrade
Once you have a development application on the Superpowers plan or above, proceed to the next step.
The process all starts in the Beefree SDK Console:
Log into the Console at developers.beefree.io
If you have not done so yet, create a development app as indicated above
Click the Details link next to any application on the Superpowers plan or above
Click the AddOns link, under Application configuration
Click the Create a custom AddOn button
When you create a new Custom AddOn, you will be prompted to enter some information through the AddOn setup form. Depending on the method that you choose, the number of fields in the form will change.
Name: The name of the AddOn is saved in the dashboard. This is not the name used for the tile in the Beefree editor’s Content tab but rather the internal name visible to other developers. In other words, it will not be shown to end-users of the editor.
Enable toggle: A toggle element to enable and disable the AddOn. When toggled OFF, the AddOn is not visible to end-users of the editor in your application (the host application).
Type: The type of content that the AddOn will create. Currently, the following content types are available:
Image
HTML
Mixed
Row
Paragraph
Button
Title
List
Menu
Icon
Handle: A unique identifier for this AddOn. This value will be the future reference between the AddOn and its content dialog. Additionally, it will be used to override settings per user or build a content dialog for the AddOn.
Method: This is an important selection and is covered in detail in the section below.
External iframe: Choose this option if the AddOn is hosted outside the host application. If this is an AddOn that will be made available to other Beefree SDK applications via the Partner AddOn directory, then it is by definition hosted outside of the host application, and therefore you must select this method.
Content Dialog: Choose this option for AddOn that lives inside the host application (e.g., internal AddOn). You cannot choose this method if you plan to make your AddOn available to others by listing it in the Partner AddOn directory.
Icon: Upload an image from your local computer that will become the icon associated with the tile shown in the editor’s Content tab. We recommend a 64 x 64 pixel SVG file.
Labels:
Content Title: This is the name that will be used for the tile in the BEE editor’s Content tab (e.g., “Countdown timer,” “Product Recommendation,” etc.).
Content button: The label for the call-to-action button (e.g., “Select a Countdown Timer”), which opens the content dialog or iframe.
Placeholder message: This is the message shown in the editor’s stage when the tile is first dropped.
If you are using the iFrame method, some additional fields are shown on the form.
Iframe URL – Required The URL that will be loaded inside the Iframe.
API Key – Optional The API Key optionally authorizes the application to load the URL provided above. If authorization is not needed, this field can be left empty.
Authentication URL – Optional The endpoint that handles the optional authorization request. If authorization is not needed, this field can be left empty.
Healthcheck URL – Optional, but required for Partner AddOns This URL will be contacted when the editor is started to verify the status of the AddOn. In the case of AddOn downtime, the editor hides it in the UI. Please note: if you are building a Partner AddOn, this is a required field as it will allow applications that have installed your AddOn to protect the quality of their end-users experience if your service is unavailable.
Once you have entered all the details, click Save, and you should immediately find your AddOn visible within the Beefree SDK platform. However, your AddOn is not completed until the configuration steps described below are done.
One of the important choices you will make is in regard to how your content creation AddOn loads.
The general rule of thumb is that if your AddOn lives within the host application, you can use a content dialog.
If your AddOn lives on another website outside of the host application or will be listed in the Partner AddOn directory, then you must select the external iframe method.
The AddOn can be built using any technology stack. There are no specific rules about how your AddOn functions internally.
However, you will need to implement the following:
JavaScript API
Protocol to communicate between iframe and the Beefree application.
Server API
Conditional health check endpoint
Optional authentication endpoint
Don’t worry about the fine details just yet! We’ll revisit each of these methods in more detail in the following sections.
Superpowers and Enterprise applications have the option to create their own, custom AddOn with content dialogs.
This option is convenient when the AddOn and host applications are hosted under the same domain.
You don’t need to implement a JavaScript API or Server API when using the content dialog.
An AddOn can only return one type of content. The type you choose will determine which sidebar properties are shown when your AddOn is selected.
Currently, you may choose between the following content types:
Image: Will insert an image module on the stage, and show the properties of an image content block in the sidebar. Adjusting the properties allows for customization of the content type.
HTML: Will insert an HTML module on the stage, and show the properties of a custom HTML content block in the sidebar, except the HTML text input will be hidden. That’s because the HTML cannot be edited outside of the content dialog or iframe made available by your AddOn.
Mixed: Will insert a module on the stage that allows for loading of different content blocks with a single action.
Row: Will insert a row module on the stage, and show the row properties in the sidebar. The row is pre-built with a specific use case in mind. For example, a row that serves of the purpose of allowing end users to add products to their builders.
Paragraph: Will insert a paragraph module on the stage, and show the properties of a paragraph content block in the sidebar.
Button: Will insert a button module on the stage, and show the properties of a button content block in the sidebar. This simplifies offering pre-built buttons to your end users.
Title: Will insert a title module on the stage, and show the properties of a title content block in the sidebar.
List: Will insert a list module on the stage, and show the properties of a list content block in the sidebar.
Menu: Will insert a menu module on the stage, and show the properties of a menu content block in the sidebar. This simplifies offering pre-built menus to your end users.
Icon: Will insert an icon module on the stage, and show the properties of an icon content block in the sidebar.
Mixed Content AddOns are a new type of content tile that allows the host application to load multiple content modules at once. This grants you greater flexibility with how you want your custom AddOn to interact with your customers and data; for example, you could create a mixed content AddOn to drop a product image in your template, along with a title, description, and more.
To utilize this feature:
Create a new custom AddOn of type “Mixed Content” from developers.beefree.io, as described in the “Getting started” section of this article;
Add the integration code required by custom AddOns (for example, if the user chose the “Content Dialog” method, it might look something like this):
The host application should return a valid response as the parameter of the “resolve” callback.
A valid response that the hosting application should send to the Beefree app when the contents of a Mixed Content AddOn are selected must have the following structure:
If the response is not valid, an error is raised, and onError
is called.
For each module type, here is the list of allowed properties.
Unless otherwise specified, the properties are optional.
The following code calls a function named resolve with an object argument. This object defines a heading element with characteristics such as type, text content, alignment, font size, boldness, text color, and link color. The resolve function handles or returns the constructed heading element.
The following table displays a list of properties in the resolve function, and each of its respective value types and whether or not they are mandatory.
The following sample code defines an image element with various attributes.
The following table displays a list of properties in the resolve function, and each of its respective value types and whether or not they are mandatory.
The following sample code defines a button element with various attributes.
The following table displays a list of properties in the resolve function, and each of its respective value types and whether or not they are mandatory.
The following sample code defines a paragraph element with various attributes. The mergeTags property contains a list of merge tags, which can be used for dynamic content insertion.
The following table displays a list of properties in the resolve function, and each of its respective value types and whether or not they are mandatory.
The following sample code defines an HTML element with various attributes.
The following table displays a list of properties in the resolve function, and each of its respective value types and whether or not they are mandatory.
The code defines a menu structure with a list of items. Each item has text content (e.g., “Menu item”) and a link associated with it. The link includes a title, URL (href), and a target attribute, demonstrating that it generates a menu with clickable items that open the specified links in the same browser window or tab when clicked.
The following table displays a list of properties in the resolve function, and each of its respective value types and whether or not they are mandatory.
This feature expands the capabilities of Custom AddOns by including:
additional integrations (e.g. a Product Block integrated with client’s e-commerce)
domain-specific contents (e.g Event Block for an application that offers event engagement)
.. and much more
To take advantage of this new feature, you have to:
Create a new custom AddOn of type “Row” from developers.beefree.io, as described in the “Getting started” section of this article;
Add the integration code required by custom AddOns (for example, if the user chose the “Content Dialog” method, it might look something like this):
The host application should return a valid response as the parameter of the “resolve” callback.
A valid response that the hosting application should send to the Beefree app when the contents of a Row AddOn are selected must have the following structure:
The content dialog configuration, required for this custom AddOn is the same configuration used by the other AddOns. Please see the Content Dialog method paragraph.
The purpose of the contentDialog object in the code snippet is to handle different types of content that can be added to a dialog. It has a handler function that resolves with an image or HTML content based on the provided contentDialogId.
To set up the content dialogs you will need to add the contentDialog object to beeConfig. For more details about the content dialog, please review Content Dialog: How it works.
This is optional. Should you feel the need to add custom fields when resolving, we created a “customFields” key allowing to you place any additional custom fields inside of that object.
The JavaScript API allows an application inside of an external iframe to communicate with the host application that’s embedded a Beefree app. If you use the content dialog option, there is no need to implement the JavaScript API.
This section describes the communication protocol between a Beefree app and an external AddOn (i.e. an AddOn that is loaded into an iframe inside a Beefree app).
The communication takes place using postMessage, which is a standard way of communicating between Window objects.
The data object sent in the messages exchanged between the Beefree app and the AddOn has a standardized form:
The application inside the iframe may trigger the following actions:
onCancel
onSave
The application inside of the iframe may listen for the following events:
loaded
init
load
The Beefree app creates an iframe for the AddOn and then expects it to start the conversation by sending the loaded action:
The AddOn may also pass optional arguments to define the shape and style of the modal dialog that will contain the AddOn. If no arguments are provided the modal will fill the screen with no border.
The following parameters are available for the loaded method:
isRounded: Boolean true or false value. If true, the modal will have rounded corners.
hasTitleBar: Boolean true or false value. If true, the modal will display a title bar.
showTitle: Boolean true or false value. If true, the name of the AddOn will display in the title bar.
width: The width of the modal in pixels. If not provided, the modal will be 100% width.
height: The height of the modal in pixels. If not provided, the modal will be 100% height.
The following is a full example of a fixed-size modal with rounded corners, no title, and no close button. In this case, a custom close button is provided by the AddOn using the onCancel method.
The Beefree app then responds with an init message that contains the current locale of the editor and any pass-through data defined by the host application:
This message may be followed by an optional load message from the Beefree app in case the user has already defined the content of this AddOn in a previous session:
Any further action is then on the AddOn. In case the user cancels the edit, it is expected to send an onCancel message:
And if the user finishes editing and clicks on the save (or OK) button, the AddOn is expected to send an onSave message:
The Server API is only for use with external iframe applications. The application inside of the iframe must implement at least one API endpoint for a health check, but may also implement an optional endpoint for authentication. If you use the content dialog option, there is no need to implement the Server API.
The health check endpoint is mandatory for apps that will be posted to the partner directory but otherwise optional. If your AddOn is for internal use (i.e. a custom AddOn), then you can perform your own health checks inside of the host application. If the application is offline, then you can use the configuration settings to disable it. If you choose to implement the health endpoint, simply ensure it returns a 200 for all GET requests.
An application is not required to use any authentication. For example, the Giphy AddOn by Beefree is FREE for all users and therefore has no need for authentication.
However, authentication can be enabled for applications of any kind, if you want to identify or authorize the user to access your resources.
To enable authentication, simply add the optional parameters to your AddOn in the Beefree SDK Console:
API Key: This is any globally unique identifier that can be used to identify the customers, but usually, this would be a bearer token or JWT.
Authentication URL: This is the URL of your authentication endpoint. More on this below.
With authentication enabled, a specific protocol follows:
Before the Beefree app creates an iframe for the AddOn, it performs a proxied GET request to the authentication URL.
The following HTTP Headers are passed to the AddOn’s endpoint.
x-real-ip: The IP Address of the host application
authorization: It contains the API Key (e.g. bearer token), which you provided to the host application.
x-bee-clientid: It contains the client id of the host application.
x-bee-uid: It contains the uid defined in the BEE configuration.
The iframe application uses the Authorization Header to validate the user permissions.
In the event of success, the application returns a URL to load within the iframe. The URL is provided as plain text with a 200 status code, no JSON formatting is needed.
In the event of unauthorized, the application returns a 403 status code.
The Beefree app creates an iframe for the AddOn using the URL returned from the authorization endpoint.
The AddOn application loads the application or performs additional authentication.
Once you have initialized the Beefree app, you can pass a series of configuration parameters to it.
The AddOn section of the configuration allows you to override the parameters you configured at the application level, on a per-user basis.
See: Adding client-side configuration parameters for AddOns.
Property | Value | Mandatory |
---|---|---|
Property | Value | Mandatory |
---|---|---|
Property | Value | Mandatory |
---|---|---|
Property | Value | Mandatory |
---|---|---|
Property | Value | Mandatory |
---|---|---|
Property | Value | Mandatory |
---|---|---|
title
String
No
text
String
Yes
align
String
No
size
String
No
bold
Boolean
No
color
String
No
linkColor
String
No
alt
String
Yes
href
String (URL)
Yes
src
String (URL)
Yes
dynamicSrc
String (URL)
No
target
String
No
label
String
Yes
href
String (URL)
No
target
String
No
color
String
No
background-color
String
No
html
String (HTML content)
Yes
underline
Boolean
No
italic
Boolean
No
align
String
No
size
Number
No
bold
Boolean
No
color
String
No
linkColor
String
No
html
String (HTML content)
Yes
items
Array of objects
Yes
text
String
No
link
Object
No
title
String
No
href
String (URL)
No
target
String
No
These AddOns need to be installed from your Beefree SDK Console. Some of them are offered by third-party providers, and they might require an active subscription with those providers in order to be used.
AI is currently the best way to gain a competitive advantage in the market. That’s why we did the heavy lifting for you and integrated the ChatGPT-3.5 OpenAI language model into Beefree SDK. This AddOn is a game-changer for SaaS businesses looking to improve customer engagement and stay ahead of the game.
How do I enable the OpenAI AddOn? | Developer’s FAQ for OpenAI | Webinar
Generate alt-text descriptions with the power of Computer Vision. Azure AI Vision is a unified service that offers innovative computer vision capabilities. Image analysis pulls from more than 10,000 concepts and objects to detect, and caption images.
For setup, please reach out to support@interactiveoffers.com, and we will provide you with an API key that identifies your application on our network.
Over 600 digital publishers use Interactive Offers to help captivate new audiences and discover new monetization solutions. These programmatic email ad solutions provide a non-intrusive way to engage users with your content while earning revenue from every email you send.
Create urgency with custom-designed countdown timers.
Give your users the ability to design fully customized countdown timers without ever leaving the editor. Create urgency for sales, events, holidays, webinars, and more, with this powerful yet easy-to-use AddOn.
Addon website | About the AddOn | Setup instructions | Privacy Policy | Support
Engage and inform with dynamic content, timers, and millions of visuals.
Email from your platform will come alive with this powerful set of dynamic-content tools and a massive collection of ready-to-use visuals. On-open content transforms the email experience into a live marketing channel, backed by millions of royalty-free visuals to grab inbox attention with eye-catching emails.
Addon website | Privacy Policy | Support
Boost clickthrough rates with dynamic countdown timers.
Sendtric countdown timers are perfect for your customers to create urgency in their campaigns. With our robust architecture and limitless customization options, our timers can be used for a variety of use cases such as sales, events, deadlines, new account sign-ups, abandoned cart reminders, and much more.
Addon website | About the AddOn | Privacy Policy | Support
Capture your customer’s attention and stand out from the competition with the use of autoplay video in email.
It works with all email clients and devices. Get up to 90% of views on your opened emails, against only 16% that can be achieved including a static picture linked to YouTube. Autoplay video in email is the best solution to quickly spread your message and get millions of video views.
Addon website | About the AddOn | Privacy Policy | Support
The GIFs by GIPHY AddOn gives your customers the best source for GIFs, ready to use in their emails and pages, without leaving the application. This AddOn is developed by Beefree SDK and powered by GIPHY.
Once installed and configured, they will see a new content tile in the builder. Once dragged into the email or page, a click on a button in the stage area will launch a GIPHY search dialog. Clicking on a GIF will import it instantly into the email or page.
Addon website | About the AddOn | Privacy Policy | Support
The Stickers by GIPHY AddOn gives your customers the best source for stickers, ready to use in their emails and pages, without leaving the application. This AddOn is developed by Beefree SDK and powered by GIPHY.
Once installed and configured, they will see a new content tile in the builder. Once dragged into the email or page, a click on a button in the stage area will launch a GIPHY search dialog. Clicking on a sticker will import it instantly into the email or page.
Learn more about how to configure and use our Azure AI Vision - Image Analysis AddOn.
Visit our Partner AddOn directory for a list of available and upcoming AddOns.
You can use ready-to-go AddOns to extend the functionality of Beefree SDK (you can also build new AddOns).
To browse and install existing AddOns, log into the Beefree SDK Console and click on Details to navigate to the application details page.
In the lower part of the page, locate the Application configuration section and click on AddOns.
You will be taken to a page that lists the AddOns that have been installed for this application. If you are just getting started, the list will be empty.
Click on Browse Partner AddOns to get the list of ready-to-install AddOns. We call them Partner AddOns because they were developed by companies that partnered with us to extend Beefree SDK’s core functionality.
You will deal directly with those companies with regard to signing up for an account, cost, support, etc.
You will instead click on Create a Custom AddOn if you want to build a new AddOn for Beefree SDK.
When you click on the Browse Partner AddOns button, a list of AddOns is displayed. You can browse them and select what you need to install.
After installing a Partner AddOn, you will need to configure it by clicking on the Edit action. A form will be displayed.
At the top of the form you will find the AddOn name and some links to the AddOn documentation. If any signup is required, that is the company that you will need to contact.
Below that, you will see the following form fields:
API Key Shown if this is an AddOn where a signup is required (you will be provided with an API key once you have signed up). Contact the provider of the AddOn if that is the case, so that you can learn about signing up, costs involved, the type of support they provide, etc.
Handle A unique identifier for this AddOn. You will use this unique identifier to pass information to the AddOn from your application, if and when needed.
Enabled A toggle element to enable and disable the AddOn. When toggled OFF, the AddOn is not visible to end users of the builder in your application.
Icon If you want to customize the icon associated with the tile shown in the builder Content tab, you canupload an image from your local PC. Choose an image that is small in size: we recommend a 64 x 64 pixel SVG file.
Labels
Title: This is the name that will be used for the tile in the builder’s Content tab (e.g. “Countdown timer”).
Call-to-action button: The label for the call-to-action button (e.g. “Select a Countdown Timer”), which is shown to end users on the button to configure the AddOn.
Placeholder text: The message shown to end users in the builder stage when the tile is first dragged and dropped into it.
With the following setup…
… you would get the following outcome:
It displays when the AddOn is added to the editing stage and invites the user to take the next step.
When the AddOn content is selected, the same button is displayed in the content properties.
Visit our AddOns Configuration to learn more about how to configure custom and partner addons.
The Alternate Text Generation with AI AddOn enables host application end users to instantly generate alternate text for images using AI. This feature is only available for images.
Visit the Alternate Text Generation with AI Knowledge Base article to learn more about the key benefits and use cases of this feature. Continue in this article to learn more about how to implement the Alternate Text Generation with AI AddOn in your host application.
Prior to getting started with the configuration, ensure you have the following:
A working subscription with Azure
Superpower or Enterprise plan
This section discusses the steps you need to take to configure alternate text generation in your host application.
To active alternate text generation with AI in your Beefree SDK Developer Console, take the following steps:
Go to the Beefree SDK Developer Console
Enter your application
Click on “AddOns”
Select the “Azure AI Vision – Image Analysis” AddOn
Click “Install”
Once you click “Install”, the “Set Up Content” pop up will appear to configure the AddOn
Toggle “Enable” to on
Insert your Azure API Key and Endpoint
Note: If you do not yet have an Azure API Key and Endpoint, navigate to the Microsoft Azure Configuration Steps of this guide.
Azure Computer Vision is a key component of the Alternate Text Generation with AI AddOn. The steps highlighted in this section will guide you through how to obtain your Computer Vision or Cognitive Services API Key and Endpoint. If you have already obtained both, you can skip this section and navigate to the Limit the Usage section of this guide to learn more about customizing the AddOn for your end users.
Take the following steps to configure Azure Computer Vision and successfully integrate the AddOn into your host application:
Login to the Microsoft Azure Portal
Go to “Azure services”
Click “Create a resource”
Search “Cognitive Services”
Select “Cognitive Services” or “Computer Vision”
Note: Cognitive Services allows you to use other functions of Azure AI, but either “Cognitive Services” or “Computer Vision” will work for configuring the alternate text generation. Ensure you select the feature that is best for your use case.
Click “Create”
It will ask you for “Project Details”
Complete the following information to satisfy the “Project Details” requirement:
Subscription
Resource group
Instance Details
Region
Name
Pricing tier
Note: Version 4.0 is not yet available in all regions, but it is required for this feature to work. If you only have access to the 3.2 version, this feature will not work. Ensure that you have access to the correct version.
Click “Review + create” to create the resource
Azure will create your resource with an endpoint and API key
Input in the endpoint in the provider url field within in the Beefree Developer Console
Input in the API key within the API key field within in the Beefree Developer Console
Note: Once you complete these steps, wait at least 15 minutes for the resources to become available. After 15 minutes, you will be able to move forward with using your API Key and Endpoint with the feature.
For more information, visit the Microsoft Azure Computer Vision documentation.
After you complete the configuration, the Alternate Text Generation with AI tool will be available to your end users. At this point in the process, the tool is offered for free to your end users. If you’d like to limit the usage of the Alternate Text Generation with AI tool, follow these additional steps to configure usage limitations.
Implement the onInfo
call
Sample code onInfo call:
Confirm the AddOn handle is “ai-alt-text”
IMPORTANT: You consume one image for each request.
The following sample code shows imagesCounter and imagesAvailable, which determine how many images you have used, and the image limit the host application setup for users, respectively.
Note: In this example, the end user can only make five requests in total, after the fifth request, the end user will no longer be able to generate alternate text. The number five is defined in the configuration and can be customized. For example, if imagesAvailable is set ten, the end user will be able to perform ten requests.
In the AddOn settings, isIconDisabled
is configured to automatically disable the Alternate Text Generation with AI feature when the counter reaches zero. However, through the Token Upselling notification banner, application end users will have the opportunity to purchase more images and regain access to the feature.
To display the widget usage, take the following steps:
The call looks for imagesAvailable value and ImagesUsed value
To activate the display usage widget, provide the usage data via the addon settings. Since the editor doesn’t track usage, you’ll need to refresh the values via the bee.loadConfig method to keep the display widget data current
Note: If either of the settings imagesAvailable or imagesUsed are not sent, the application will not show the consumption.
This section discusses advanced permissions for your application users. You can use the two settings IsIconDisabled
and enabled to configure permissions for your end users. To configure both booleans, take the steps outlined in the subsequent sections.
To disable prompts per user, perform the following:
Set isIconDisabled
to true
Note: The end user will be able to see the button, but will not be able to use the button through setting the isIconDisabled
setting to true
You can reference the difference in appearance in the following images.
Image 1.0 displays an example of the wand when the feature is not active.
Image 2.0 displays an example of the AI wand icon when the feature is active.
To disable the AddOn completely for an end user, perform the following:
Set the enabled
field to false
Ensure you familiarize yourself with the following feature limitations to ensure this AddOn is suitable for your application’s needs:
You can generate the caption for an image multiple times, but you’ll always get the same result for the alternate text
The AI model does not work well with PNG or SVG images with transparent backgrounds, especially when the outline is black
Only available in English
Not available for Multi-language templates
Images must have URLs and be publicly accessible
Only available for static images, not available for dynamic images
Not available for custom AddOn of image type
Unlike the OpenAI AddOn, the Alternate Text Generation AddOn does not charge by tokens. Rather, the AddOn charges for each image caption you generate. Reference the Microsoft Azure Pricing page for additional information.
If you want to know if you are being charged, and you have the usage widget enabled, you will only be charged if the counter goes down.
Note: If an error occurs after the icon for the Alternate Text Generation AddOn is clicked by an end user, and text is not generated, you will not be charged. You will only be charged for instances when a caption is successfully generated.
In the event an error occurs, the end user will see an alert and you will receive a message from the Azure API with additional details regarding the error.
For more information on potential errors and error codes, reference the Azure Cognitive Services REST API reference or the Computer Vision REST API reference – Azure Cognitive Services depending on which service you opted in for to configure this feature.
The AI Alternate Text Generator is compatible with token upselling. The token upselling feature notifies the end users when their token usage is running low and when it is completely out. Both notifications include an option for the end user to purchase more tokens. The appearance of these notifications are customizable. Read the Token Upselling documentation to learn more about configuring token upselling within your host application.
Q: Will Azure keep the photos used with this feature?
A: The following answer is directly from the Azure Data and privacy for Image Analysis website:
The images you submit to Image Analysis service are processed in real time, and the input images and results are not retained or stored in the service after processing.
For more information on image processing and data security, refer to the Azure AI services security documentation.
Read this technical documentation to learn more about how to configure bulk Alt text generation with AI.
While this feature works for multiple image modules, it does not work for dynamic images.
Prior to configuring this feature, ensure that you have the following:
Superpowers or Enterprise account
Enabled Azure Vision AddOn in your Developer Console
If you have a default alt text set, the image won't be included among the ones that need an AI-generated alt text. If you have a default value set in your defaultContents
, this will require the end user to delete the default text before being able to generate the new alt text with AI. To avoid this behavior, and for this feature to work best, we recommend you do not set a default value for alt text in your beeConfig
.
If you do have a default value set, you can delete it one of the following ways:
Set the alt property as an empty string
Delete the line of code from your defaultContents
The following code shows an example of the alt property within the defaultContents
. In the scenario presented in the following code, we recommend deleting the Default alt value set within the alt property.
The following code shows an example of the alt property set as an empty string. This is how we recommend you set your code for this feature to work best.
Note: You can still use the defaultContents alt value and the AI-generated Alt text in Bulk at the same time. However, it will require the end user to delete the default alt text prior to using the AI-generation tool for that particular image module.
The type of images they can create alt-text for are the following:
Images
Stickers
Icons
GIFs
Custom AddOn Images
This feature is not compatible with Multi-language Templates, and is currently only available in English.
If you experience any issues with setting up this AddOn, take the following measures to troubleshoot your configuration:
Ensure your Azure API key is connected correctly within your Beefree SDK Developer Console.
Ensure your custom endpoint is set up correctly in the SDK console.
As you configure this feature, ensure you consider the following:
Once enabled, the OpenAI AddOn is available in the side panel for the following content blocks:
Title
Paragraph
List
Button
In certain scenarios, you may find the need to personalize both the user interface (UI) and the operational features of the OpenAI AddOn. This is particularly applicable when you want to achieve objectives such as:
Controlling Access to the Prompt: You might want to limit who can access and manipulate the prompt. In a shared environment, for instance, you may want to restrict certain users from altering the prompt, which is crucial for maintaining consistency and avoiding unwanted changes.
Enabling Per User or Per Content Type: You might want to limit who can access the AI so you can up-sell the feature to end-users. Or, you may only want to enable the AI capability for specific content types, such as paragraphs vs. buttons.
Disabling Automatic Suggestions: The OpenAI AddOn can generate automatic suggestions at the prompt, which may not always be desirable. In such cases, you might want to disable this feature to have more control over the input and output at the prompt.
We’ll cover all of these scenarios in the following sections as we discuss the settings and configuration options available for developers.
Currently, the following settings are supported:
With each prompt response, the addon will report the usage data provided by the OpenAI API via the editor’s onInfo
callback without storing or tracking the data.
You may choose to track the end-user’s total usage through the aforementioned onInfo
callback if desired. Additionally, you may choose to show the usage data to the user via the built-in display widget. To activate the display usage widget, provide the usage data via the addon settings. Since the editor doesn’t track usage, you’ll need to refresh the values via the bee.loadConfig
method to keep the display widget data current.
See below for an example of how the UI will render when provided with the optional display usage widget.
To enable OpenAI AddOn, but disable the prompt per user, pass the isPromptDisabled
boolean parameter as true
.
The following example will disable the prompts for the user with an uid
of inactive-user
.
To disable the OpenAI AddOn for a particular user, use the following configuration. Ensure the enabled
parameter is set to false
. To turn the AddOn back on for a user, edit the parameter to true
.
The OpenAI AddOn is available for the following content blocks:
Title
Paragraph
List
Button
You may utilize the Advanced Permissions configuration to disable OpenAI AddOn per content type.
The following example will disable the addon for the paragraph block:
OpenAI AddOn includes preset prompt suggestions to facilitate the content creation process. These appear after the initial draft of your text has been formulated and whenever further refinement is needed. Please note that this function applies only when editing existing text through the AI prompt. The suggestions will not appear for placeholder text.
Here’s a simplified step-by-step guide on how to use suggestions, as shown below:
Start with your draft text added to the design area.
If you desire to adjust the tone to be more formal, for example, click on the paragraph, list, title, or button you want to modify.
Navigate to the ‘Write with AI’ option.
Click on the area designated for adding prompts.
You’ll notice the prompt suggestions popup.
Select the ‘Make it [desired tone]’ option, making sure to replace [desired tone] with a value (e.g., funny)
Click ‘Generate’.
The AI will then generate a revised version of your content, matching the tone you entered.
Below are the preset prompt suggestions we have identified for the different content tiles, along with their corresponding translation key, incase you’d like to revise the prompt through our custom languages feature.
Bulk Alt text Generation with AI is a feature that works as an extension to our existing . The new functionality enables you to provide your end users with an easy method to create alt text captions across multiple image module types simultaneously using artificial intelligence. Through this feature, your application end users will be able to boost the accessibility of their content while also saving a significant amount of time.
To configure Bulk Alt Text Generation with AI for your application, take the Configuration Steps outlined in our .
This feature is compatible with . Through Token Upselling, you can configure your application to verify that end users have enough tokens to generate alt-text for multiple images at once.
If they do not have sufficient image tokens in their account, you can redirect them to prior to performing the bulk generation.
Repeat the configuration steps outlined in .
You will be billed through your Microsoft Azure account for AI generation-related features. Ensure you for details on pricing.
The OpenAI AddOn is fully functional from the moment it’s enabled via the . For information about enabling OpenAI AddOn .
Monitoring Token Usage for Cost Management: By tracking the number of tokens being used, you can effectively manage and regulate your expenses related to using the OpenAI AddOn. This becomes important when your usage is high, and you must keep a budget check.
Note: All settings are optional and may be refreshed, in real-time, via the instance method (e.g. bee.loadConfig(settings)
) during the active session.
Setting | Type | Description |
---|
Label | Key |
---|
Label | Key |
---|
Label | Key |
---|
Label | Key |
---|
Spell-check the content | mailup-bee-common-component-ai.suggest-check-spelling |
Correct grammar mistakes in the content | mailup-bee-common-component-ai.correct-grammar |
Translate content to [language] | mailup-bee-common-component-ai.translate |
Make it [tone] without changing the format | mailup-bee-common-component-ai.adjust-tone |
Use Active Voice | mailup-bee-common-component-ai.use-active-voice |
Summarize the content | mailup-bee-common-component-ai.summarize-text |
Convert the content to the third person without changing the format | mailup-bee-common-component-ai.convert-third-person |
Translate content to [language] | mailup-bee-common-component-ai.translate |
Make it [tone] | mailup-bee-common-component-ai.make-it-tone |
Use Active Voice | mailup-bee-common-component-ai.use-active-voice |
Spell-check the content | mailup-bee-common-component-ai.suggest-check-spelling |
Correct grammar mistakes and return the content | mailup-bee-common-component-ai.correct-grammar-list |
Translate content to [language] | mailup-bee-common-component-ai.translate |
Make it [tone] without changing the format | mailup-bee-common-component-ai.adjust-tone |
Use Active Voice | mailup-bee-common-component-ai.use-active-voice |
Capitalize all letters | mailup-bee-common-component-ai.capitalize-text |
Capitalize the first letter of each word | mailup-bee-common-component-ai.capitalize-all-words |
Make it [number] words long | mailup-bee-common-component-ai.characters-length |
Make it [tone] without changing the format | mailup-bee-common-component-ai.adjust-tone |
Translate it to [language] | mailup-bee-common-component-ai.translate-heading |
How to enable AI-generated Titles and Descriptions for Page Builder, and Subject and Preheaders for Email Builder.
Read this technical documentation to learn more about how to configure AI generated titles, meta descriptions for pages, preheaders, and subject lines for emails within your host application.
AI addresses common issues in crafting effective subject lines, pre-headers, and titles, such as vague messaging, lack of urgency, and limited personalization. By utilizing AI, users can generate compelling copy for email campaigns and landing pages. The key benefits include optimizing title formats for character count and mobile responsiveness, avoiding common mistakes, and expediting the copy creation process. This tool aims to enhance efficiency in marketing endeavors by providing a solution to errors commonly encountered in title and subject line composition. The feature is applicable to both Page and Email applications within the builder.
Beefree SDK Superpowers or Enterprise plan subscription
OpenAI API Key
Activated OpenAI AddOn within your Beefree SDK Developer Console
Learn more about how activate this feature for email and page builder respectively.
To activate AI Generated Meta tag fields for your email builder application, take the following steps:
Sign into your Beefree SDK Developer Console
Navigate to your application’s settings
Toggle on Enable Subject - Meta tag
Toggle on Enable Preheader - Meta tag
To activate AI Generated Meta tag fields for your page builder application, take the following steps:
Sign into your Beefree SDK Developer Console
Navigate to your application’s settings
Toggle on Enable Title - Meta tag
Toggle on Enable Description - Meta tag
This section outlines the steps for configuring this feature within your host application.
To configure AI Generated meta tag fields within your host application, take the following steps:
Enable the “ai-integration
” AddOn
Add the metadataGeneration
parameter
Set the parameter to true
is your configuration code
The following code displays an example of the enabled feature.
To disable the AI Generated Metadata feature, set metadataGeneration
to false
in your code.
The following code sample displays the disabled feature.
AI Generated Titles, Descriptions, Preheaders, and Subject Lines is compatible with Multi-language templates.
To use both Multi-language templates and AI-Generated Titles, Descriptions, Preheaders, and Subject Lines, take the following steps:
Perform the Multi-language Configuration Steps
Perform the AI-Generated Titles, Descriptions, Preheaders, and Subject Lines Configuration steps
Test the AI-generated content in a few different languages
Confirm everything works as intended
If AI-driven generation fails, check the OpenAI AddOn configuration. Ensure your OpenAI API key is working properly, and that the AddOn is configured correctly within your Beefree SDK developer Console.
Customers will be billed through their OpenAI accounts for AI generation-related features. This is done through connecting their OpenAI API key in the Beefree SDK Developer Console.
| number |
| number |
| string |
| boolean | Set to true to lock the prompt. The chat interface will be disabled but allow previous answers to be applied. |
| boolean | Set to true to hide the suggestions popup. Set this to |
| boolean |
| boolean |
This document discusses the data flow of your OpenAI API key from the moment you activate the OpenAI AddOn within your Beefree SDK Developer Console. In this document, you learn more about Beefree SDK’s security practices, frameworks, and protocols in reference to protecting your sensitive data assets.
The following diagram provides a visualization of the data flow for the OpenAI API key.
This data flow diagram illustrates the flow of data and the key components involved in securing the API key from developer input to end user interaction.
The following list shows each component within the data flow diagram along with the component’s description.
Developer Console: This is where the developer inputs the API key, initiating the process.
OpenAI AddOn: This is where the developer enters their OpenAI API key and activates the OpenAI AddOn for their host application.
Data Store: The encrypted API key is stored securely in the data store.
End User: The end user interacts with the host application.
HA OpenAI AddOn: The frontend user interface of the OpenAI AddOn that the end user engages with.
Proxy: The proxy receives and forwards requests to the OpenAI API, and sends responses to the OpenAI AddOn within the host application.
OpenAI API: OpenAI API processes requests and provides responses.
The flow and management of your OpenAI API key is designed to ensure its security. Security measures are implemented as soon as you enter your OpenAI API key into the Developer Console. Once you enter your API key, it is immediately encrypted over TLS. From there, the encrypted API key is securely stored in the Beefree data store. Your API key remains encrypted both at rest and during transit.
When the end user types a prompt into the OpenAI AddOn, their prompt is forwarded through a proxy. The proxy receives the request, retrieves the OpenAI API key, and forwards both the API key and the prompt to OpenAI. OpenAI processes the request and forwards the response to the proxy. The proxy then delivers the OpenAI response to the OpenAI AddOn, which displays the response in your application’s frontend to the end user.
Note: The proxy does not log any personal data and only facilitates secure communication from request to response. Throughout this process, the API key remains in the backend, preserving its security and ensuring no personal data is processed by the application. This approach is GDPR compliant.
For additional information, we recommend you reference our Terms of Service and our AIF third-party providers' policies.
The Token Upselling feature is a notification banner that you can integrate within your OpenAI AddOn. This notification banner informs your application end users of when their available tokens are running low and when they are completely out. Both notification banners display an option for the end user to purchase additional tokens. These notification banners support a healthy token management workflow, and help avoid any potential interruptions in the end user’s workflow through transparently informing them about their available tokens.
The following notification banner will appear to an end user when their tokens are running low. “Running low” is defined as when an end user has a remaining token balance equal to or less than 20 percent of their initial token count.
Note: You can edit the notification banner trigger to a remaining percentage other than the default 20 percent. Reference the Customize Notification Trigger to learn more about how to change this percentage.
The following notification will appear to an end user when they no longer have any remaining tokens. This is triggered when tokenCounter
is greater than or equal to tokensAvailable
. For reference, tokenCounter
refers to the amount of tokens an end user has used since their initial token balance.
The text inside the banner notifications is customizable. Reference the Customize Notification Banner Text section to learn more about customizing the notification banner text within your application.
Read this article to learn more about configuring token upselling within your host application.
Prior to getting started with the configuration, ensure you have the following:
Superpower or Enterprise plan
An OpenAI AddOn within your application
This section discusses the configuration steps you need to follow to integrate the Token Upselling feature into your web application.
To integrate the Token Upselling feature into your application, take the following steps:
To enable Token Upselling, you need to pass your configuration code to the AI Integration AddOn within the Developer Console.
When you pass your code, ensure you define the following variables:
tokenCounter
: Counts how many tokens an end user has used in total
tokensAvailable
: Displays how many remaining tokens an end user had
isUpsellEnabled
: A boolean that confirms whether or not the Token Upsell feature is enabled
Note: If you do not provide tokenCounter
and tokensAvailable
, the end user will have unlimited access to the AI functionality within your application.
The purpose of the following code is to initialize and track the number of tokens available and the number of tokens used. It also checks if the upsell feature is enabled.
When you define tokensAvailable
and tokenCounter,
you limit the end user’s token usage.
isPromptDisabled
automatically disables the ai-integration
when the number of tokens used by an end user (tokenCounter
) is greater than or equal to the number of tokens available (tokensAvailable
).
The following code displays an example of the AddOn AI Integration configuration code.
The purpose of the onInfo
callback in the following code snippet is to handle information messages related to the usage of the ai-integration
AddOn. It checks if the code of the infoMessage
is 1000 and if the handle is ai-integration
. If both conditions are met, it updates the AddOn settings and reloads the configuration.
The code works by:
Retrieving the handle from the infoMessage
.
Checking if the handle is ai-integration
.
If the handle is ai-integration
, retrieve the totalTokens
from the infoMessage
.
Updating the tokenCounter
by adding the totalTokens
.
Creating a newConfig
object with the updated tokenCounter
and other settings.
Reloading the configuration by calling bee.loadConfig(newConfig)
.
The purpose of the "upsell" action is to trigger the handler function, which, based on the following code sample, increases the number of tokens available by 1000 and returns an object with updated settings for the ai-integration
add-on.
The handler function is a function that is executed when the upsell
action is triggered. It has two parameters: resolve
and reject
. The resolve
parameter is a function that is called when the handler function successfully completes its task, and the reject
parameter is a function that is called when the handler function encounters an error or fails to complete its task.
Configure the content dialog and upgrade path to enable the token upselling notification banner. This configuration is important because it defines the steps the end user takes to purchase more tokens.
The following code displays an example of how to configure the content dialog.
Ensure you define how your host application will resolve the upsell feature. You can do this by returning the configuration on how to handle the content dialog within the addOn configuration. The code provided in the previous step displays an example of this.
The following table shows a list of what your web application can pass to the Beefree SDK in the addOn configuration of ai-integration.
The regenerate button appears after an end user submits their first prompt to OpenAI through the OpenAI AddOn. This button enables the end user to resubmit the same prompt to OpenAI in order to receive a newly generated response. This is helpful when an end user may want a variety of prompt responses to select from. However, each regenerated response incurs additional token usage and costs. This section will discuss how to disable the regenerate button in the event you would like to remove it from your application’s user interface.
Image 1.0 shows the regenerate button as an example at the bottom of an AI generated prompt response.
To achieve this, configure the isRegenerateEnabled setting to false.
The following example displays the sample code for the regenerate button.
The default trigger for the upsell notification banner is when an end user has used 80% of their initial tokens, and only has 20% of their initial tokens available. These percentages are customizable based on your use case. You can edit the notification banner to trigger at any percentage of the initial token count that best works for your host application.
Take the following steps to customize your notification banner trigger:
Pass upsellTrigger
to the initial AddOn configuration
This section discusses how you can customize the notification banner text. For reference, the notification banner has the following default message:
“You’re out tokens. Purchase more”
To edit the notification banner text, take the following steps:
Identify the Template: Locate the notification template you want to customize. In this example, the template is specified with a custom language ID: `bee-common-component-ai.no-token-message`
.
Understand the Template: Read and understand the original template text, which is "You're out of {tokenLabel}. {ctaLabel} to continue." This template includes two placeholders: {tokenLabel}
and {ctaLabel}
.
Understand the Default Behavior: Understand that by default, the template includes a Call-to-Action (CTA) button represented by the `{ctaLabel}`
placeholder.
Determine Your Customization Needs: Decide what changes you want to make to the template.
Options include:
Removing the CTA button entirely.
Changing the CTA button label.
Reordering the text within the template.
Create a Custom Language Entry: If you want to customize the template, create a custom language entry. This entry should have the same custom language ID: `bee-common-component-ai.no-token-message`
.
Modify the Template: Customize the template in your custom language entry according to your needs. For example:
To remove the CTA: "You're out of {tokenLabel}
."
To change the CTA label: "You're out of {tokenLabel}
. Click here to refill."
Implement the Custom Language Entry: In your web application code, replace the default template with the custom language entry you've created. Ensure that you use the correct custom language ID when accessing the text.
You can also configure the Token Upselling feature to guide your application's end user to purchase images. Purchasing additional image tokens allows your end users to continue using features such as Alt Text Generation with AI and Bulk Alt Text Generation.
The following code shows an example of a Token Upselling configuration for both text and image tokens. Purchasing text tokens supports end users as they use features connected to the OpenAI AddOn, and purchasing image tokens supports ends users as they use features connected to the Azure AI Vision AddOn.
This section discusses the Token Upselling feature limitations:
Customization features only extend to the text within the notification banner, and are not available for the design of the notification banner.
The only billing related to this feature is on OpenAI’s end with token purchasing through use of your OpenAI API key.
This section discusses the error handling for token upselling. If an error occurs, end user’s will receive the following message:
“Something went wrong. Retry your request after a brief wait.”
The following image shows an example of how this message will appear within the user interface.
For more information on how the Token Upselling feature will visually look to an end user within the user interface, visit the OpenAI Feature Enhancements article.
An addon is an application that extends the functionality of the Beefree SDK editor.
Software companies can both use addons and build addons.
In some case you might decide to build addons for Beefree SDK. In that case:
More specifically:
You will be able to install many addons with just a few clicks (but some addons will require that you become a customer of the addon provider and obtain an API key).
You will be able to customize things like the name of the feature shown to your end-users in the Content tab of the editor, the icon used, etc.
You will be able to install your custom addons on your own Beefree SDK host applications. No other Beefree SDK customer (i.e. no other software application that has embedded a Beefree content builder) will see it.
You created it to provide end-users of any application that has embedded a Beefree SDK content builder with new features that extend the builder.
Any Beefree SDK customer will see it and will be able to install it, as Partner AddOns are listed in the Partner AddOn Directory.
To build an addon, you need an eligible Beefree SDK subscription plan, including any one of the following:
Yes, that’s exactly the process of developing an addon that is available to the entire community of applications that have embedded the Beefree SDK editor.
As of January 2020, addons become visible as new tiles in the Content tab.
In the future, we may develop new types of addons that may impact other areas of the editor. If you have specific ideas or requests, certainly let us know.
As of October, 2022, you can generate two kinds of content with an addon:
An image content block
A custom HTML content block
A mixed Content content block
A custom row content block
A countdown timer or a live map, for example, they will mostly likely be image content blocks in Beefree SDK.
Learn how to configure Custom and Partner AddOns.
For example:
You can have an AddOn enabled at the application level, but disabled for users on a lower plan (so they have to upgrade to a higher plan in your app to get it).
You could change the language used for the AddOn text labels depending on the language used for the builder, for that user.
Etc.
The following code displays an AddOn configuration example.
The following code snippet shows an example of how to configure an AddOn of type Paragraph.
In the following code snippet, you can see additional examples of AddOn configurations for other content types.
When configuring your code for AddOns, it's important to note that each AddOn has a specific type that is identified by its id
. Below are the supported content types that can be used as AddOn IDs:
Image
: For adding and configuring images.
HTML
: For embedding custom HTML code.
Mixed
: For a combination of various content types.
Row
: To structure content in rows.
Paragraph
: For text paragraphs.
Button
: To add call-to-action buttons.
Title
: For headings and subheadings. Set the id
to heading
in your configuration.
List
: For ordered and unordered lists.
Menu
: For navigation menus.
Icon
: To include icons.
Using these IDs correctly when defining your AddOn configurations ensures that the correct content type is implemented within your application.
Note: The editable
property is a boolean with a default value of false. If this boolean is set to true, the content related to that content AddOn will become editable.
This section provides an overview of what each parameter does.
enabled: Determines if the AddOn is available within your application. Set to false
to disable the AddOn.
id: A unique identifier for the AddOn. This is critical for distinguishing between different AddOns.
label: A brief text that represents the AddOn’s purpose or content. It is displayed within the user interface.
ctaLabel: Call-to-Action text encouraging the user to interact with the AddOn.
placeholder: A short guide or prompt displayed before the AddOn content is initialized or added.
editable: Controls whether the AddOn's content can be edited by the end user. When set to true
, editing features are enabled.
Display only value for the optional : The total tokens available for the user to consume during the session. If provided, tokensUsed
and tokenLabel
are required.
Display only value for the optional : The number of tokens that the addon user has consumed during the current session. If provided, tokensAvailable
and tokenLabel
are required.
Display only value for the optional : The API reports token usage, but the host app may refer to tokens as words or any other nomenclature that makes sense to its users. Required when providing usage limits via tokensAvailable
and tokensUsed
parameters.
A boolean that confirms whether or not the feature is enabled.
A boolean that confirms whether or not the is enabled
Settings | Data Types | Defaults |
---|---|---|
You use an addon when you need a new feature for Beefree SDK (e.g. you want your end-users to be able to insert a countdown timer in an email) and find an addon that meets your needs. You will search, find, and install addons in the , in the application configuration area. The will vary depending on the addon.
When you create an addon for yourself, it’s called a .
If you build an addon for any application that uses Beefree, then it’s a .
That’s precisely why we’re excited about addons: companies like yours can easily turn on all kinds of additional features (i.e. addons), with minimal effort. You will find, select, and install the addons that meet your needs directly from within the .
The Partner AddOn Directory will go live by mid-March, 2020. from us on this.
You will access the directory from within the , from the Details page of any application that you have created.
There will be several addons listed that will help your end-users with things like countdown timers, dynamic maps, personalized cards, etc. ()
A is an addon that you developed for your own use. You developed it to provide your own end-users with new features by extending the Beefree SDK editor, and those features may not make sense for any other application.
These addons are not listed in the Partner AddOn Directory, unlike .
A is an addon that you developed for any Beefree SDK customer that wishes to take advantage of it.
If you are on a lower-level plan and wish to test building an addon, you can simply for free.
First you develop a
Then you submit it for listing in the Directory
Just remember that – technically speaking – you can only use the when developing a Partner AddOn. So, a Custom AddOn that you want to later list in the Partner AddOn Directory, must be developed that way.
An example would be a tile (you can see it in the Content tab in the screenshot below) that can be dragged to the editing stage to allow a Beefree SDK user to search, find and insert a GIF animation into the message or page they are designing.
For details, see:
from us. We email rather infrequently, and it’s typically about things that are important to Beefree SDK customers.
Once you have initialized Beefree SDK, you can pass a series of to it.
The AddOn section of the configuration allows you to override the parameters you configured in the , on a per-user basis.
Parameter | Type | Description |
---|
tokenLabel
string
Default is “tokens”.
isPromptDisabled
boolean
Default is false. If changed to true, it can override tokens balance and disable the prompt.
isUpsellEnabled
boolean
Default is false. If changed to true, it enables the upsell.
tokensCounter
number
Tokens used, if not provided in the configuration, the user has unlimited tokens.
tokensAvailable
number
Tokens available to the end user. If not provided in the configuration, the user has unlimited tokens.
upsellTrigger
number
Default is 80 (%) of tokens available.
isSuggestionsDisabled
boolean
Default is false.
isRegenerateEnabled
boolean
Default is false.
| Boolean | When false, the AddOn content is not displayed in the Content tab. |
| Number | Identifies the AddOn by using the handle provided in the configuration form. |
| Text String | The text string displayed for the AddOn tile in the Content tab |
| Text String | The text string displayed in the button that triggers the AddOn action. It’s displayed in:
|
| Text | Text displayed in the content placeholder to provide further information about the content. |
| Boolean | A boolean with a default value of false. If this boolean is set to true, the content related to that content AddOn will become editable. |