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.
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.
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.
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.
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.
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.
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 . 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.
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 .
For additional information, we recommend you reference our and our .
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 |
---|
Settings | Data Types | Defaults |
---|
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 and .
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 , and purchasing image tokens supports ends users as they use features connected to the .
For more information on how the Token Upselling feature will visually look to an end user within the user interface, visit the .
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 |
| string | Default is “tokens”. |
| boolean | Default is false. If changed to true, it can override tokens balance and disable the prompt. |
| boolean | Default is false. If changed to true, it enables the upsell. |
| number | Tokens used, if not provided in the configuration, the user has unlimited tokens. |
| number | Tokens available to the end user. If not provided in the configuration, the user has unlimited tokens. |
| number | Default is 80 (%) of tokens available. |
| boolean | Default is false. |
| boolean | Default is false. |
| 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 |
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