What are Partner AddOns?

Partner AddOns can easily be integrated with your application in a matter of minutes by installing them inside of the Developer Console. You can reference available Partner AddOns inside of the Partner AddOn Directory. If the AddOn with the functionality you are looking for is not offered within the Partner Directory, you also have the option to create your own Custom AddOn.

At a high-level, these AddOns enable you to add extended functionality and capabilities to your application. These extended functionalities empower you to customize your end users' experience based on their interests and the desired tasks they are trying to perform with your app. The AddOns work as additional features you can opt in for on top of the base features that come with your Beefree SDK plan type.

Where can I find the Partner AddOns Marketplace?

You can find the Partner AddOns Marketplace within the Beefree SDK Developer Console.

Take the following steps to access the Partner AddOns Marketplace:

1. Log in to your Developer Console.

2. Navigate to the application you'd like to add a Partner AddOn to.

3. Click on the Details button.

4. Navigate to AddOns and click View more.

   You'll be redirected to the AddOns page.

5. Click on the Browse AddOns button.

6. You'll be redirected to the Marketplace with the available AddOns.

How soon is the functionality available to my end users?

Once you successfully install a Partner AddOn following the steps outlined in Installing Partner AddOns, it will be available to your application's end users. Depending on the AddOn, you may or may not apply configuration settings to manage the functionality of the AddOn. For example, you may want to apply configurations to AI-related AddOns to control tokens and associated costs.

Overview

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.

Prerequisites

Prior to getting started with the configuration, ensure you have the following:

• A working subscription with Azure

• Superpower or Enterprise plan

Configuration Steps

This section discusses the steps you need to take to configure alternate text generation in your host application.

Developer Console

To active alternate text generation with AI in your Beefree SDK Developer Console, take the following steps:

1. Go to the Beefree SDK Developer Console

2. Enter your application

3. Click on “AddOns”

4. Select the “Azure AI Vision – Image Analysis” AddOn

5. Click “Install”

   Once you click “Install”, the “Set Up Content” pop up will appear to configure the AddOn

6. Toggle “Enable” to on

7. 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.

Microsoft Azure Configuration Steps

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:

1. Login to the Microsoft Azure Portal

   1. Go to “Azure services”

   2. Click “Create a resource”

   3. Search “Cognitive Services”

   4. 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.

2. Click “Create”

   It will ask you for “Project Details”

3. 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.

1. Click “Review + create” to create the resource

2. Azure will create your resource with an endpoint and API key

3. Input in the endpoint in the provider url field within in the Beefree Developer Console

4. 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.

Properties and Parameters

Limit the Usage

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. Take the steps outlined in this section to limit the usage of this feature for your end users.

The onInfo call in the following code snippet updates the usage limits for the Alternate Text Generation with AI feature. When AI-generated alternate text is used, the infoMessage.detail.consumedImages field indicates how many images were processed. This number is added to imagesCounter, which keeps track of the total images used so far. The backend processes images in bulk, so imagesCounter reflects the cumulative count of consumedImages from a single backend call. The refreshed settings ensure that the isIconDisabled property is updated if the image usage limit (imagesAvailable) is reached, and the settings are reloaded with bee.loadConfig(refreshedUsageSettings).

If you’d like to limit the usage of the Alternate Text Generation with AI tool, take the following steps to configure usage limitations.

1. Implement the onInfo call

Sample code onInfo call:

else if (handle === 'ai-alt-text') {
            imagesCounter += infoMessage.detail.consumedImages
            const refreshedUsageSettings = {
              addOns: [
                {
                  id: "ai-alt-text",
                  settings: {
                    imagesAvailable: imagesAvailable,
                    imagesUsed: imagesCounter,
                    isIconDisabled: (imagesCounter >= imagesAvailable) ? true : false,
                    isUpsellEnabled: isUpsellEnabled,
                  }
                },
              ],
            }
            // Reload Config
            bee.loadConfig(refreshedUsageSettings)
          }

1. Confirm the AddOn handle is ai-alt-text

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.

let imagesCounter = 0
let imagesAvailable = 5

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.

1. 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.

  // Check which addon
        const handle = data.detail.handle
        if (handle === 'ai-alt-text') {
          imagesCounter += infoMessage.detail.consumedImages || 1
          const refreshedUsageSettings = {
            addOns: [
              {
                id: "ai-alt-text",
                settings: {
                  imagesAvailable: imagesAvailable,
                  imagesUsed: imagesCounter,
                  isIconDisabled: imagesCounter >= imagesAvailable,
                  isUpsellEnabled: isUpsellEnabled,
                }
              },
            ],
          }
          bee.loadConfig(refreshedUsageSettings)
        }

Display the Usage Widget

To display the widget usage, take the following steps:

1. The call looks for imagesAvailable value and imagesUsed value

2. 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

let imagesCounter = 0
let imagesAvailable = 1000
let isUpsellEnabled = true

const beeConfig = {
  uid: 'string',
  ...
  addOns: [
    {
      id: "ai-alt-text",
      settings: {
        imagesAvailable: imagesAvailable,
        imagesUsed: imagesCounter,
        isIconDisabled: false,
        isUpsellEnabled: isUpsellEnabled,
      }
    },
  ],
  ...
  onInfo: function (data) {
    if (data.code === 1000) {
      const handle = data.detail.handle
      
      if (handle === 'ai-alt-text') {
        imagesCounter += data.detail.consumedImages
        const refreshedUsageSettings = {
          addOns: [
            {
              id: "ai-alt-text",
              settings: {
                imagesAvailable: imagesAvailable,
                imagesUsed: imagesCounter,
                isIconDisabled: (imagesCounter >= imagesAvailable),
                isUpsellEnabled: isUpsellEnabled,
              }
            },
          ],
        }
        bee.loadConfig(refreshedUsageSettings)
      }
    }
  },
}

Note: If either of the settings imagesAvailable or imagesUsed are not sent, the application will not show the consumption.

Advanced Permissions

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.

Disable Prompts Per User

To disable prompts per user, perform the following:

1. Set isIconDisabled to true

{
                id: "ai-alt-text",
                settings: {
                  isIconDisabled: 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.

Disable AddOn Per User

To disable the AddOn completely for an end user, perform the following:

1. Set the enabled field to false

const beeConfig = {
    uid: 'inactive-user',
    ... 
    addOns: [
      {
        id: "ai-alt-text",
        enabled: false
      },
    ],
    ...
}

Feature Limitations

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

Billing

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.

Error Handling

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.

Additional Considerations

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.

FAQs

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.

Getting started

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.

Installing an AddOn

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:

Title for the content tile

Placeholder text and button

It displays when the AddOn is added to the editing stage and invites the user to take the next step.

AddOn selection button in content properties

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.

AI Stable Diffusion XL AddOn Text-to-Image

The Stability AI AddOn converts text to images. This feature allows your end users to submit descriptions of what they would like to see in their AI-generated images, and to also submit negative prompts of what they do not want to see in their image. Once they submit the prompt and negative prompt, they'll receive an AI-generated image that they can use directly within their designs. Visit the AI-generated white label end user guide to learn more about how this feature works for your application's end users.

How to activate

This section discusses the prerequisites and steps you need to take to get started with this feature.

Prerequisites

• Stability AI API key

• Stability AI addOn installed in the Beefree SDK Developer Console

Take the following steps to activate this feature:

1. Log in to the Beefree SDK Developer Console.

2. Navigate to the application you'd like install the addOn in.

3. Install the Stability AI addOn.

4. Provide the requested details.

5. Save your changes.

The addOn is now activated.

Configuration settings

The Stability AI text-to-image AddOn uses a new handle.

This handle is ai-image-generation.

Consider the following settings when configuring this feature in your code:

Sample code

This section includes sample code you can use to configure this AddOn.

onInfo: function (infoMessage) {
  if (infoMessage.code === 1000) {
    var handle = infoMessage.detail.handle

    if (handle === 'ai-image-generation') {
      imagesCounter += infoMessage.detail.consumedImages
        const refreshedUsageSettings = {
          addOns: [
            {
              id: "ai-image-generation",
              settings: {
                imagesAvailable: imagesAvailable,
                imagesUsed: imagesCounter,
                isGenerationDisabled: (imagesCounter >= imagesAvailable) ? true : false,
                upsellTrigger: 3,
                isUpsellEnabled: isUpsellEnabled,
              }
            },
          ],
        }
        // Reload Config
        bee.loadConfig(refreshedUsageSettings)
      }
  }
},

upsell: {
  label: 'upsell',
  handler:(resolve, reject, args)=>{
    if(args.handle === 'ai-image-generation'){
      imagesAvailable+=5
      resolve({
        addOns:[{
          id: "ai-image-generation",
          settings: {
            imagesAvailable: imagesAvailable,
            imagesUsed: imagesCounter,
            isGenerationDisabled: (imagesCounter >= imagesAvailable) ? true : false,
            upsellTrigger: 3,
            isUpsellEnabled: isUpsellEnabled,
          }}]
        })
    }
  }
},

addOns: [
  {
    id: "ai-image-generation",
    settings:{
      isGenerationDisabled: true,
    }
  },
],

addOns: [
  {
    id: "ai-image-generation",
    enabled: false,
  },
],

Custom AI Writing Assistant

The Custom AI Writing Assistant AddOn enables host applications to integrate their own LLM models with Beefree SDK. This allows host applications to provide their end users with advanced AI writing capabilities that are specific to their domains. Using the Content Dialog, this AddOn employs the same entry points as the AI writing assistant, allowing full control over the AI experience within your application. Once your Custom AI Writing Assistant AddOn is fully configured, the Content Dialog displays the modal you created within the user interface when end users click the Write with AI button in the sidebar.

How do I enable the Custom AI Writing Assistant AddOn? | Terms of Services

Stability AI

The Stability AI AddOn converts text to images. This feature allows your end users to submit descriptions of what they would like to see in their AI-generated images, and to also submit negative prompts of what they do not want to see in their image. Once they submit the prompt and negative prompt, they'll receive an AI-generated image that they can use directly within their designs.

How do I enable the Stability AI AddOn? | AI Providers and Data Security | Terms of Services

DeepL

Through this AddOn and Multi-language templates, you can empower your end users to create up to six different language versions of a single design. Once your end users create their new language versions, they can click the Translate button to automatically translate all the translatable content within their designs.

How do I enable the DeepL AddOn? | AI Providers and Data Security | Terms of Services

AI Writing Assistant

Empower users to generate text quickly with AI. With this AddOn, your end users will see a new “Write with AI” button for Title, Paragraph, List, and Button content blocks. Beefree SDK processes your end users' prompts, sends them to your AI provider, and returns the response to the end user. They can then decide to apply or regenerate the response. By integrating the AI Writing Assistant, you provide your end users with a powerful tool to complete their designs quickly, which helps them maintain a competitive edge. Choose between Azure OpenAI or OpenAI as providers for this feature, our AddOn is quick and simple to integrate.

How do I enable the AI Writing Assistant AddOn? | Developer’s FAQ for OpenAI | Webinar

Azure AI Vision - Image Analysis

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.

IO Monetizer

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.

Countdown Timers by NiftyImages

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

Countdown Timers by Sendtric

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

Viewed

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

Gifs

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

Stickers

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.

Addon website | About the AddOn | Privacy Policy | Support

MLT Automatic Bulk Translation with DeepL

The new DeepL addOn available in the Developer Console empowers your end users to translate all the translatable content within their designs using the new translate button. This feature requires that you have Multi-language templates configured for your application, and that you have a DeepL API key. Once you configure both within your host application, your end users will be able to automatically translate the translatable content within the different language versions of their designs. Also, now your end users can have up to six different language versions of their designs. Visit the Automatic Translations white label end user documentation to learn more about how this feature works for your application's end users.

The following content types qualify as translatable content:

The HTML translatable property refers to the text within the HTML tags of the element itself. For the "Button" module, the translatable property is "label," which specifies the text displayed on the button. In the "Paragraph" module, the translatable property is "html," indicating the HTML content within the paragraph tags. For "Heading/Title," the property is "text," representing the textual content of the heading or title. The "List" module also uses "html," referring to the HTML content within the list tags. The "Image" module has the "alt" property, which provides alternative text for the image. In the "Video" module, "thumbAlt" denotes the alternative text for the video's thumbnail. The "Icon" module includes "text," "alt," and "title," covering the textual content, alternative text, and title of the icon, respectively. Lastly, the "Menu" module uses "text" and "title" for its textual content and title.

The following video shows a template with Heading, Paragraph, and List modules. When the Translate button is clicked, the text within the translatable properties for those modules are translated. The following section displays a JSON example with a translation in Spanish.

Example JSON Translation

{
  "page": {
    "body": {
      "container": {
        "style": {
          "background-color": "#FFFFFF"
        }
      },
      "content": {
        "computedStyle": {
          "linkColor": "#0068A5",
          "messageBackgroundColor": "transparent",
          "messageWidth": "500px"
        },
        "style": {
          "color": "#000000",
          "font-family": "Arial, Helvetica, sans-serif"
        },
        "type": "page-properties",
        "webFonts": []
      },
      "description": "Empty template for BEE",
      "head": {
        "meta": {
          "description": "Enjoy a heartwarming moment with your furry friends while savoring your morning coffee. Learn about life's lessons and the importance of hard work together.",
          "subject": "Morning Coffee Conversations with Pets",
          "title": "Morning Coffee Conversations with Pets",
          "translations": {
            "es-ES": {
              "title": "Café matinal Conversaciones con mascotas",
              "description": "Disfrute de un momento entrañable con sus amigos peludos mientras saborea su café matutino. Aprendan juntos las lecciones de la vida y la importancia del trabajo duro.",
              "subject": "Café matinal Conversaciones con mascotas"
            }
          }
        }
      },
      "language": {
        "label": "English",
        "value": "en-US"
      },
      "rows": [
        {
          "columns": [
            {
              "grid-columns": 12,
              "modules": [
                {
                  "descriptor": {
                    "computedStyle": {
                      "hideContentOnDesktop": false,
                      "hideContentOnMobile": false
                    },
                    "heading": {
                      "prompt": "00000000-0000-0000-0000-000000000000",
                      "style": {
                        "color": "#555555",
                        "direction": "ltr",
                        "font-family": "inherit",
                        "font-size": "23px",
                        "font-weight": "700",
                        "letter-spacing": "0px",
                        "line-height": "120%",
                        "link-color": "#E01253",
                        "text-align": "center"
                      },
                      "text": "Morning Coffee Conversations with Pets",
                      "title": "h1",
                      "translations": {
                        "es-ES": {
                          "text": "Café matinal Conversaciones con mascotas"
                        }
                      }
                    },
                    "style": {
                      "padding-bottom": "0px",
                      "padding-left": "0px",
                      "padding-right": "0px",
                      "padding-top": "0px",
                      "text-align": "center",
                      "width": "100%"
                    }
                  },
                  "locked": false,
                  "type": "newsletter-modules-heading",
                  "uuid": "11111111-1111-1111-1111-111111111111"
                },
                {
                  "descriptor": {
                    "computedStyle": {
                      "align": "center",
                      "hideContentOnMobile": false
                    },
                    "divider": {
                      "style": {
                        "border-top": "1px solid #BBBBBB",
                        "width": "100%"
                      }
                    },
                    "style": {
                      "padding-bottom": "10px",
                      "padding-left": "10px",
                      "padding-right": "10px",
                      "padding-top": "10px"
                    }
                  },
                  "locked": false,
                  "type": "newsletter-modules-divider",
                  "uuid": "22222222-2222-2222-2222-222222222222"
                },
                {
                  "descriptor": {
                    "computedStyle": {
                      "hideContentOnAmp": false,
                      "hideContentOnDesktop": false,
                      "hideContentOnHtml": false,
                      "hideContentOnMobile": false
                    },
                    "paragraph": {
                      "computedStyle": {
                        "linkColor": "#0068a5",
                        "paragraphSpacing": "16px"
                      },
                      "html": "<p>Once upon a time, a man sat at his kitchen table, enjoying his morning coffee as his two dogs and one cat gathered around him. With a warm cup in hand, he began to share with his furry companions the harsh reality of life after school. \"You see,\" he explained, \"we have to work every day to earn money so we can afford simple pleasures like pizza.\"</p>\n<p>The man's pets listened intently, their eyes filled with curiosity as he continued to elaborate on the importance of hard work and dedication. \"It may seem daunting at first,\" he reassured them, \"but with perseverance and a positive attitude, we can achieve our goals.\" The dogs wagged their tails in agreement, while the cat purred softly in approval.</p>\n<p>As the morning sun streamed through the windows, casting a warm glow over the kitchen, the man smiled at his beloved pets. \"Remember,\" he said affectionately, \"life is full of challenges, but as long as we stick together and work hard, we can enjoy the simple pleasures that make it all worthwhile.\" And with that heartwarming sentiment, they continued their morning ritual of coffee and conversation, grateful for each other's company.</p>",
                      "prompt": "33333333-3333-3333-3333-333333333333",
                      "style": {
                        "color": "#000000",
                        "direction": "ltr",
                        "font-family": "inherit",
                        "font-size": "14px",
                        "font-weight": "400",
                        "letter-spacing": "0px",
                        "line-height": "120%",
                        "text-align": "left"
                      },
                      "translations": {
                        "es-ES": {
                          "html": "<p>Érase una vez un hombre sentado a la mesa de su cocina, disfrutando de su café matutino mientras sus dos perros y un gato se reunían a su alrededor. Con una taza caliente en la mano, empezó a compartir con sus peludos compañeros la dura realidad de la vida después de la escuela. \"Veréis\", explicó, \"tenemos que trabajar todos los días para ganar dinero y poder permitirnos placeres sencillos como la pizza\"</p>\n<p>Las mascotas del hombre escuchaban atentamente, con los ojos llenos de curiosidad, mientras él seguía explicando la importancia del trabajo duro y la dedicación. \"Al principio puede parecer desalentador\", les tranquilizó, \"pero con perseverancia y una actitud positiva, podemos conseguir nuestros objetivos\" Los perros movieron la cola en señal de acuerdo, mientras el gato ronroneaba suavemente en señal de aprobación.</p>\n<p>Mientras el sol de la mañana se colaba por las ventanas, arrojando un cálido resplandor sobre la cocina, el hombre sonrió a sus queridas mascotas. \"Recordad\", les dijo cariñosamente, \"la vida está llena de retos, pero mientras permanezcamos unidos y trabajemos duro, podremos disfrutar de los placeres sencillos que hacen que todo merezca la pena\" Y con ese sentimiento reconfortante, continuaron su ritual matutino de café y conversación, agradecidos por la compañía mutua.</p>"
                        }
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

How to activate

This section discusses the prerequisites and steps you need to take to get started with this feature.

Prerequisites

• Ensure the Multi-language templates feature is toggled on inside of the Developer Console.

• DeepL API key

  Note: DeepL offers a free tier for their plans. You can obtain an API key from DeepL for free to get started with this feature.

Activate the addOn in the Developer Console

Take the following steps to activate this feature:

1. Log in to the Beefree SDK Developer Console.

2. Navigate to the application you'd like install the addOn in.

3. Install the DeepL addOn.

4. Provide the requested details.

5. Save your changes.

Auto Translation Configuration Parameter

Activate this feature by adding the new configuration parameter templateLanguageAutoTranslation and setting it to true.

The following code sample displays an example of the templateLanguageAutoTranslation, templateLanguage, and templateLanguages parameters.

// Configuration for the bee plugin
// Configuration for the bee plugin
var beeConfig = {
  uid: 'fakeUid123',
  container: 'bee-plugin-container',
  templateLanguageAutoTranslation: true,
  templateLanguage: {
    value: 'en-US',
    label: 'English'
  },
  templateLanguages: [
    { value: 'it-IT', label: 'Italian' },
    { value: 'fr-FR', label: 'French' },
    { value: 'es-ES', label: 'Spanish' },
    { value: 'ru-RU', label: 'Russian' },
    { value: 'el-GR', label: 'Greek' },
    { value: 'hy-AM', label: 'Armenian' }
  ]
};

If you have a custom top bar in your application, take the following additional steps:

1. Describe how to translate a template:

   1. translateTemplate → bee.translateTemplate({ language: 'it-IT' })

2. Describe how to reset a translation:

   1. resetTemplateTranslation → bee.resetTemplateTranslation({ language: 'it-IT' })

Translate a Template

A function to translate the template to a specified language using the Beefree SDK.

import React from 'react'; // Importing React
import { bee } from 'bee-plugin'; // Importing the bee plugin

// Define a functional component
const TranslateTemplateButton = () => {
  // Function to translate the template to Italian
  const translateTemplate = () => {
    bee.translateTemplate({ language: 'it-IT' }); // Calling the translateTemplate function with Italian language code
  };

  // Returning a button that triggers the translateTemplate function when clicked
  return (
    <button onClick={translateTemplate}>
      Translate Template to Italian
    </button>
  );
};

export default TranslateTemplateButton; // Exporting the component

// Function to translate the template to Italian
function translateTemplate() {
  bee.translateTemplate({ language: 'it-IT' }); // Calling the translateTemplate function with Italian language code
}

// Adding an event listener to the button with id 'translateButton'
// When the button is clicked, the translateTemplate function is triggered
document.getElementById('translateButton').addEventListener('click', translateTemplate);

<!-- Button that will translate the template to Italian when clicked -->
<button id="translateButton">Translate Template to Italian</button>

Reset a Translation

A function to reset the translation of the template to its original state using Beefree SDK.

import React from 'react'; // Importing React
import { bee } from 'bee-plugin'; // Importing the bee plugin

// Define a functional component
const ResetTemplateTranslationButton = () => {
  // Function to reset the template translation to the original state
  const resetTemplateTranslation = () => {
    bee.resetTemplateTranslation({ language: 'it-IT' }); // Calling the resetTemplateTranslation function with Italian language code
  };

  // Returning a button that triggers the resetTemplateTranslation function when clicked
  return (
    <button onClick={resetTemplateTranslation}>
      Reset Template Translation
    </button>
  );
};

export default ResetTemplateTranslationButton; // Exporting the component

// Function to reset the template translation to the original state
function resetTemplateTranslation() {
  bee.resetTemplateTranslation({ language: 'it-IT' }); // Calling the resetTemplateTranslation function with Italian language code
}

// Adding an event listener to the button with id 'resetButton'
// When the button is clicked, the resetTemplateTranslation function is triggered
document.getElementById('resetButton').addEventListener('click', resetTemplateTranslation);

<!-- Button that will reset the template translation when clicked -->
<button id="resetButton">Reset Template Translation</button>

Error handling

If errors occur, onWarning or onError will be triggered. If the request completes successfully there’s no direct feedback.

The following errors are returned by the backend service when something goes wrong during the translation.

Learn more about how to configure and use our Azure AI Vision - Image Analysis AddOn.

Overview

This page discusses how to configure OpenAI as a provider for the within the Beefree SDK Developer Console. If the AI Writing Assistant AddOn is already enabled for your application, and you'd like to switch providers, take the steps outlined in the section of the to enable OpenAI as your new provider.

Prerequisites

Prior to getting started, ensure you have the following:

• An OpenAI account and API Key.

• The AI Writing Assistant AddOn enabled in the .

• Beefree SDK .

Configuration Steps

Take the following steps to configure this provider:

1. Log in to the .

2. Navigate to the application with the AI Writing Assistant enabled.

   1. Click Details.

3. Navigate to the AddOns under Application configuration section.

   1. Click View more.

4. Click the Manage Providers tab.

5. Click Add provider.

6. Complete the required information.*

7. Click Save to save your provider configuration.

Shared Logic Considerations

Consider the following shared logic when integrating the AI Writing Assistant AddOn and OpenAI as a provider:

Additional Considerations

Overview

This page discusses how to configure Azure OpenAI as a provider for the within the Beefree SDK Developer Console. If the AI Writing Assistant AddOn is already enabled for your application, and you'd like to switch providers, take the steps outlined in the section of the to enable Azure OpenAI as your new provider.

Prerequisites

Prior to getting started, ensure you have the following:

• Beefree SDK .

• An Azure OpenAI account, API Key, URL Provider, and Deployment ID.

• The AI Writing Assistant AddOn enabled in the .

Configuration Steps

Take the following steps to configure this provider:

1. Log in to the .

2. Navigate to the application with the AI Writing Assistant enabled.

   1. Click Details.

3. Navigate to the AddOns under Application configuration section.

   1. Click View more.

4. Click the Manage Providers tab.

5. Click Add provider.

6. Complete the required information.*

7. Click Save to save your provider configuration.

Shared Logic Considerations

Consider the following shared logic when integrating the AI Writing Assistant AddOn and Azure OpenAI as a provider:

Additional Considerations

Overview

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.

Prerequisites

Prior to configuring this feature, ensure that you have the following:

• Superpowers or Enterprise account

• Enabled Azure Vision AddOn in your Developer Console

Default Contents

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.

Configuration Steps

Token Upselling Compatibility

The type of images they can create alt-text for are the following:

• Images

• Stickers

• Icons

• GIFs

• Custom AddOn Images

Multi-Language Templates Compatibility

This feature is not compatible with Multi-language Templates, and is currently only available in English.

Troubleshooting

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.

Additional Considerations

As you configure this feature, ensure you consider the following:

Overview

The provides your application's end users with access to the the Write with AI button for text-based content blocks within the builder. When your end users click this button, a modal appears prompting them to submit a prompt to the AI Assistant. This is the portion of their journey that interacts with the provider that you configured within the . Beefree SDK offers a variety of providers as options for enabling the AI Writing Assistant AddOn for your application's end users. These providers each include their own set of benefits, and ultimately, the one you select for your configuration should be the provider with the set of benefits that most closely aligns with the goals you have for your application.

This page outlines and discusses each of the available provider options, and their corresponding set of benefits.

Available Providers

This section discusses each of the available providers.

OpenAI

is a versatile and widely recognized provider in the AI space. By integrating OpenAI into your application through the , your end users gain access to advanced generative text capabilities powered by GPT models. These models are known for their ability to create natural-sounding, coherent text across various use cases, such as marketing copy, email drafts, and creative writing. OpenAI's API also supports a high level of customization, allowing you to fine-tune the model's behavior to align with your application's goals.

Benefits of using OpenAI:

• Access to industry-leading GPT models for advanced text generation.

• Broad support for a variety of languages and writing styles.

• Extensive documentation and community resources to support implementation.

• Highly scalable infrastructure capable of handling large user bases.

Azure OpenAI

combines the power of OpenAI’s GPT models with Microsoft’s Azure cloud platform. This integration provides robust enterprise-level security, compliance, and availability while delivering powerful AI capabilities to your application's end users. With Azure OpenAI, you also benefit from seamless integration with other Microsoft services, making it ideal for organizations already using the Azure ecosystem.

Benefits of using Azure OpenAI:

• Enterprise-grade security and compliance standards, including regional data hosting options.

• Integration with other Azure tools and services for enhanced functionality.

• Flexible scaling to accommodate varying levels of user demand.

• Support for high-availability setups, ensuring consistent performance.

Anthrophic

Benefits of using Anthropic:

• A strong emphasis on safety, ethical considerations, and AI alignment.

• Excellent for conversational use cases and creative writing needs.

• Simplified integration process with clear documentation and support.

• Scalable solutions that maintain consistency and reliability.

Additional Considerations

Other Resources

AI Writing Assistant Overview

Use this AddOn to enable the AI Writing Assistant for your end users. This AddOn allows users to generate text within their designs using AI, helping them complete their designs faster and more efficiently. This AddOn integrates with OpenAI, Azure OpenAI, or Anthropic as the providers for this feature.

With this feature, your end users will see a Write with AI button for Title, Paragraph, List, and Button content blocks. Beefree SDK processes your end users' prompts, sends them to your AI provider, and returns the response to the end user. They can then decide to apply or regenerate the response.

By integrating the AI Writing Assistant, you provide your end users with a powerful tool to complete their designs quickly, which helps them maintain a competitive edge. This AddOn is quick and simple to integrate.

The following image provides an example of how the AI Writing Assistant looks to your end user:

How to activate the AI Writing Assistant

Prerequisites

• Azure OpenAI, OpenAI, or Anthropic account and credentials.

• AI Writing Assistant AddOn enabled in the Developer Console.

Switch Providers

Take the following steps to switch providers:

1. Log in to the Beefree SDK Developer Console.

   1. Navigate to the application you'd like to use.

   2. Navigate to the application's AddOns section.

2. Click on the Edit button for the AI Writing Assistant AddOn .

   1. Click Manage providers.

   2. Click Add provider.

      1. Complete the required information*.

3. Click Save.

*The following information is required for each provider.

Required Provider Information

Manage Providers

When managing your providers, you will have the following options:

• Edit

• Deactivate

• Delete

Additional considerations

• Azure OpenAI, OpenAI, and Anthropic are the only provider options for the AI Writing Assistant.

• Cognitive Vision is the provider for the Alt text generation with AI feature.

Customize the AddOn's Configuration

In certain scenarios, you may find the need to personalize both the user interface (UI) and the operational features of the AI Writing Assistant AddOn. This is particularly applicable when you want to achieve objectives such as:

2. 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.

3. 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.

4. Disabling Automatic Suggestions: The AI Writing Assistant 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.

General Settings

Currently, the following settings are supported:

AI Writing Assistant Configuration Example

Monitor Usage

With each prompt response, the addon will report the usage data provided by Azure OpenAI or OpenAI API via the editor’s onInfo callback without storing or tracking the data.

You can also monitor when the user applies a prompt response.

Display Usage Widget

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.

Disable Prompts Per User

To enable the AI Writing Assistant 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.

Disable AddOn Per User

To disable the AI Writing Assistant 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.

Disable AddOn Per Content Block Type

The AI Writing Assistant AddOn is available for the following content blocks:

• Title

• Paragraph

• List

• Button

You may utilize the Advanced Permissions configuration to disable AI Writing Assistant AddOn per content type.

The following example will disable the addon for the paragraph block:

Prompt Suggestions

The AI Writing Assistant 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:

1. Start with your draft text added to the design area.

2. 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.

3. Navigate to the ‘Write with AI’ option.

4. Click on the area designated for adding prompts.

5. You’ll notice the prompt suggestions popup.

6. Select the ‘Make it [desired tone]’ option, making sure to replace [desired tone] with a value (e.g., funny)

7. Click ‘Generate’.

The AI will then generate a revised version of your content, matching the tone you entered.

Customize Prompt Suggestions

Below are the preset prompt suggestions we have identified for the different content tiles, along with their corresponding translation key, in case you’d like to revise the prompt through our custom languages feature.

Paragraph

Button

List

Title

Additional considerations

Prior to configuring the AI Writing Assistant AddOn, consider the following:

• Scrolling behavior

Scrolling Behavior

This section will discuss how to manage an odd scrolling behavior related to the AI Writing Assistant AddOn. At times, the AI Writing Assistant side panel opens and requires the end user to scroll down to reach the prompting area.

The following image shows an example of this behavior:

If you encounter this behavior, take the following steps to avoid the need for scrolling to access the prompting area:

1. Navigate to your CSS code.

2. Change the height of your container using the calc() function as shown in the following examples:

This sets the height of the element to be the full height of its parent (100%) minus 100px, which accounts for an offset such as a footer.

This sets the height of the element to be exactly 100% of its parent's height with no offset.

The calc() function allows for mathematical expressions in CSS values, making it versatile for dynamic layouts.

1. Save your updated CSS.

You can now access the prompting section of the AI Writing Assistant on the front end without scrolling down the side panel.

The following image shows an example of this result:

AI Providers and Data Security

Overview

This page discusses how to configure Anthropic as a provider for the AI Writing Assistant AddOn within the Beefree SDK Developer Console. If the AI Writing Assistant AddOn is already enabled for your application, and you'd like to switch providers, take the steps outlined in the Switch Providers section of the AI Writing Assistant page to enable Anthropic as your new provider.

Prerequisites

Prior to getting started, ensure you have the following:

• A Superpowers or Enterprise Beefree SDK plan

• The AI Writing Assistant AddOn enabled in the Beefree SDK Developer Console.

• An API Key for Anthropic

  • Note: Refer to Anthropic’s documentation for instructions on creating an account and generating your API key.

Configuration Steps

Take the following steps to configure this provider:

1. Log in to the Beefree SDK Developer Console.

2. Navigate to the application with the AI Writing Assistant enabled.

   1. Click Details.

3. Navigate to the AddOns under Application configuration section.

   1. Click View more.

4. Click the Manage Providers tab.

5. Click Add provider.

6. Complete the required information.*

7. Click Save to save your provider configuration.

*Reference the Required Provider Information section of the AI Writing Assistant AddOn page to reference what information is required to configure Anthropic as a provider.

Shared Logic Considerations

Consider the following shared logic when integrating the AI Writing Assistant AddOn and Anthropic as a provider:

• Methods: The methods used for the Anthropic provider are inherited from the AI Writing Assistant AddOn. These include functionality for generating content for supported block types (Title, Paragraph, List, Button) and for handling metadata.

• Events: The integration supports all events from the AI Writing Assistant, such as tracking user actions and processing content generation requests.

• Callbacks: All callbacks associated with the Anthropic provider are inherited from the AI Writing Assistant. They manage notifications for successful or failed content generation attempts.

Additional Considerations

• Billing: Refer to Anthropic’s pricing documentation for more information.

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.

Overview

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.

Prerequisites

• Beefree SDK Superpowers or Enterprise plan subscription

• OpenAI API Key

• Activated OpenAI AddOn within your Beefree SDK Developer Console

Activation Steps

Learn more about how activate this feature for email and page builder respectively.

Email Builder

To activate AI Generated Meta tag fields for your email builder application, take the following steps:

1. Sign into your Beefree SDK Developer Console

2. Navigate to your application’s settings

3. Toggle on Enable Subject - Meta tag

4. Toggle on Enable Preheader - Meta tag

Page Builder

To activate AI Generated Meta tag fields for your page builder application, take the following steps:

1. Sign into your Beefree SDK Developer Console

2. Navigate to your application’s settings

3. Toggle on Enable Title - Meta tag

4. Toggle on Enable Description - Meta tag

Configuration Steps

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:

1. Enable the “ai-integration” AddOn

2. Add the metadataGeneration parameter

3. Set the parameter to true is your configuration code

The following code displays an example of the enabled feature.

addOns: 
[{
    id: "ai-integration",
    settings: {
        tokensAvailable: tokensAvailable,
        tokensUsed: tokenCounter,
        tokenLabel: 'tokens',
        isPromptDisabled: (tokenCounter >= tokensAvailable) ? true : false,
        isSuggestionsDisabled: false,
        isUpsellEnabled: true,
        metadataGeneration: true  // Enabled by default
    }
}, ],

Disable AI Generated Meta Tag Fields

To disable the AI Generated Metadata feature, set metadataGeneration to false in your code.

The following code sample displays the disabled feature.

addOns: [{
    id: "ai-integration",
    settings: {
        tokensAvailable: tokensAvailable,
        tokensUsed: tokenCounter,
        tokenLabel: 'tokens',
        isPromptDisabled: (tokenCounter >= tokensAvailable) ? true : false,
        isSuggestionsDisabled: false,
        isUpsellEnabled: true,
        metadataGeneration: false
    }
}, ]

Multi-Language Templates Compatibility

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:

1. Perform the Multi-language Configuration Steps

2. Perform the AI-Generated Titles, Descriptions, Preheaders, and Subject Lines Configuration steps

3. Test the AI-generated content in a few different languages

4. Confirm everything works as intended

Troubleshooting

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.

Additional Considerations

• 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.

Introduction to Brand Tone

The Apply a Brand Tone feature is an optional enhancement to the AI Writing Assistant AddOn. This feature allows your application's end users to define which brand tone they want the AI Writing Assistant to use when generating text. This definition provides OpenAI with additional brand tone context it considers when generating text to return to your end user. The result is more precise, accurate, and useable copy for your application's end users.

By configuring the AI Writing Assistant to reflect a specific brand tone, you empower end users to create designs that consistently align with their brand identity, reducing the need for manual adjustments to the AI's responses. This feature can improve workflows through organic and beneficial adoption of the AI Writing Assistant, positioning your application as a powerful tool.

To learn more about the end user experience and what it looks like to utilize this feature on the frontend, visit the Apply a Brand Tone white label end user documentation. The markdown file is also available in our white label docs repository.

Prerequisites

Prior to getting started, ensure you have the following:

• A Superpowers or Enterprise Beefree SDK plan

• The AI Writing Assistant AddOn enabled in the Beefree SDK Developer Console.

• OpenAI API Key

Integrating Brand Tone

This section will walk you through how to add the Apply brand tone option to the AI Writing Assistant integrated within your host application.

At a high-level, this section will cover how to take the following steps and successfully integrate Brand Tone:

1. Add isBrandTonesEnabled setting to ai-integration

2. Add hooks to BeeConfig for data storage and management

Configure the AI Writing Assistant with the Brand Tone Settings

Take the following steps to configure the AI Writing Assistant to include Brand Tone:

1. Add the ai-integration AddOn to your beeConfig object under the addOns array.

2. Add the isBrandTonesEnabled setting and set the boolean to true. This is the only required setting to enable this feature.

3. (Optional) Customize the settings for the Brand Tones feature to allow users to add, edit, delete, or select tones based on your application’s needs.

Sample Code for Brand Tones Settings

The following code snippet provides an example configuration for integrating the AI Writing Assistant AddOn with the settings for managing Brand Tones:

const beeConfig = {
  uid: 'unique_user_id', // Unique identifier for the user
  addOns: [
    {
      id: "ai-integration", // Identifier for the AI integration add-on
      settings: {
        isBrandTonesEnabled: true, // Mandatory to enable the Brand Tones feature
        canAddBrandTones: true, // Optional: Allow the user to add new Brand Tones
        canDeleteBrandTones: false, // Optional: Prevent the user from deleting existing Brand Tones
        canEditBrandTones: true, // Optional: Allow the user to edit existing Brand Tones
        canSelectBrandTones: true // Optional: Allow the user to select Brand Tones for use
      }
    }
  ],
  // Other configurations
};

Available Settings for Brand Tone

You can control the different settings for the Brand Tone using the following booleans. You can use these boolean flags to allow or restrict user actions.

For example:

• Set isBrandTonesEnabled: true if you want to enable the Brand Tones feature.

• Set canDeleteBrandTones: false to prevent end users from deleting existing tones.

The following table provides details about each setting and how you can customize them.

Add Hooks for Data Storage

This section explains how to add hooks for data storage and management.

Introduction to Hooks

Hooks allow your application to store and manage Brand Tone data. By defining the brandTone hook, you ensure communication between your system and Beefree SDK, enabling users to create and manage Brand Tones effectively.

Step-by-Step Instructions

1. Define the Hook

Add the brandTone hook to your beeConfig object. This hook handles all Brand Tone-related actions like retrieving, saving, and deleting tones.

Sample Code:

const beeConfig = {
    uid: 'unique_user_id',  // Unique identifier for the user
    addOns: [
        // ...
    ],
    hooks: {
      // ... ,
      brandTone: {
        handler: async (resolve, reject, { action, data }) => {
          switch (action) {
            case 'get':
              const brandVoiceList = await getBrandTones() // Your own implementation to retrieve saved brand tones
              resolve(brandVoiceList)
              break
            case 'save':
              await saveBrandTone(data) // Store brand tone to your own system
              resolve()
              break
            case 'saveSelected':
              await saveSelectedBrandTone(data) // Store the selected brand tone to your own system
              resolve()
              break
            case 'getSelected':
              const selectedBrandTone = await getSelectedBrandTone() // Get the stored selected brand (this will be autoselect when the users open the AI side panel)
              resolve(selectedBrandTone)
              break
            case 'delete':
              await deleteBrandTone(data) // Delete the brand tone from your system
              resolve()
              break
            case 'edit':
              await editBrandTone(data) // Update the just edited brand tone on your system 
              resolve()
              break
            default:
              break
          }
        }
      }
    }
};

2. Implement the Handler Logic

The brandTone hook supports various actions.

The handler receives the resolve and reject methods to fulfill the Promise for the requested data or action. Use reject only for issues encountered on your application's side, such as errors in data retrieval. Always call resolve after processing the data within your system.

Alongside resolve and reject, the handler also receives an object containing action and data properties. The action determines the specific scenario in the Brand Tones flow, while the data is used to store any necessary changes.

Refer to the table below for details on when and how each action will be triggered.