What if the default styles and standard settings aren’t enough? No worries! In the following sections, we will look at styling your popup to make it look and feel more like the one real visitors will interact with.

Custom styles (themes)

A theme is simply a set of custom styles that give the popup its look and feel. Separate from your layout, Popup Builder comes with some preset themes. The primary is our default theme that is loaded when no settings are specified. We also provide an empty theme that has no styles, which you can use a blank canvas to create your own theme. This is one of the most powerful features of Popup Builder, and we’ll be covering custom styles in depth below.

Here is a preview of the configuration:

workspace: {
  popup: {
    customStyles: {
      ...
    },
  }
}

Applying styles to the HTML

To understand the best way to apply your styles, let’s start by inspecting the underlying HTML structure so you can view where the system will map your styles.

Popup HTML

<div id="popup-container">
  <div id="popup-header">
    <div></div>
    <div></div>
  </div>
  <div id="popup-content">
    <!-- BEE CONTENT -->
  </div>
  <div id="popup-footer">
    <div></div>
    <div></div>
  </div>
</div>  

Here is a quick break down of what each div does:

popup-container

This is where you will apply any styles related to how the popup looks, such as border-radius, drop shadows, background colors, or padding.

popup-header

The header is sometimes used to add a close icon to a popup or display a title.

popup-content

The div that holds the editable content of your Beefree application.

popup-footer

You can use this div to show a traditional footer for your popup or position some icons outside the popup container (e.g., a close button).

The above HTML structure is represented in your bee config as the following JSON object.

customStyles: {
  container: {},
  header: {},
  content: {},
  footer: {},
  overlay: {},
}, 
  

Add styles to the JSON section that corresponds to the HTML element you want to style.

For example, if you want to apply styles to the div with id popup-container, then you would add the styles to the following JSON:

customStyles: {
  container: {
    ...styles,
  },
},  
 

We’ll go deeper into styling in the following sections.

Order of operations

You may be wondering at this point if you have to design an entire theme to get started. Well, you can if you want to, but thanks to the order of operations, you don’t have to. You can start with our default theme and pass in the styles that you want to override. Any style you provide will take priority over any of the defaults.

Starting from scratch

We said that you could start from scratch if you want, and the easiest way to do that is by using our theme parameter. This allows you to avoid overriding every default style and gives you an empty canvas to build your own theme.

Example:

beeConfig: {
  workspace: {
    popup: {
      theme: 'custom'
    }
  }
}

Applying custom styles

Now that you have seen what the HTML looks like and have some idea where to apply your styles, let’s look at how you get your styles into the editor. The best way to show you is by example, so let’s get started with some common use cases!

Adding a border

Using the schema JSON above and your HTML structure knowledge, you probably guessed that the border is defined on the popup container. So here’s what that would look like:

Example:

workspace: {
  popup: {
    customStyles: {
      container: {
        border: '1px solid black'
      }   
    }
  }
}

Adding a drop shadow

Example:

workspace: {
  popup: {
    customStyles: {
      container: {
        boxShadow: '0 5px 15px rgba(0, 0, 0, 0.5)'
      }
    }
  }
}

Deep-dive into CSS properties

After looking at a couple of samples, you may notice these parameters are looking familiar. That’s because every layer of our schema maps to a layer of HTML with the same name AND can be styled with any valid CSS property.

Basically, CSS properties are the same as CSS used by web developers in style sheets, but instead of dashes to separate words, it uses a camel case.

Example:

The CSS property of the style box-shadow would be boxShadow.

Why not use CSS styles as defined by CSS3 specification directly? Well, simply put, CSS properties are better suited for JSON and can easily be shared with any FE application using the popular React framework.

Custom layouts

We covered the default layout settings in Setting layout and size section. To recap, the layout determines the type of popup (e.g., a bar) and its location on the screen (e.g., bottom, top, or side). Our research team looked into it, and it turns out, nearly all popups fall into one of the most popular layouts, which we’ve included as presets. But, when that’s not enough, the configuration option customLayout can be used to make minor adjustments to a preset layout or create an entirely new layout from scratch.

Here is a preview of the configuration:

workspace: {
  popup: {
    customLayout: {
      ...
    },
  }
}

The layout HTML

The popup is positioned in the workspace using divs and CSS flexbox. We created a layout structure that mimics an HTML page to map your page’s styles to the workspace.

Layout HTML:

<div id="html">
  <div id="body">
    <div id="main">    
      <div id="popup-wrapper">
        <!-- Popup -->
      </div>
      <div id="popup-overlay">
    </div>
  </div>
</div>  

Div List and Descriptions

Here is a quick break down of what each div does:

HTML

We will apply the styles placed here to the document HTML tag.

body

We will apply the styles placed here to the HTML body tag

main

This is the main container div of the workspace.

popup-wrapper

The wrapper of the popup is used entirely for positioning the popup within the workspace main div.

Changing the position of a layout

Example:

workspace: {
  popup: {
    layout: 'classic-center',
    customLayout: {
       wrapper: {
        maxWidth: '700px'
      }  
    }
  }
}

Overview

This section provides the information you need to get started integrating PopUp Builder in your SaaS applications. For more advanced settings, see Popup Builder – Advanced Settings.

Integration

Out-of-the-box, the setup and configuration are the same as Email and Page Builder. This section will cover the settings specific to Popup Builder. Check out our Getting Started guide if you’re new to Beefree SDK or unfamiliar with the configuration basics (as seen in the example below).

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  ...
}

Loading Popup Builder with no additional settings will give the end-user a beautifully designed popup and workspace to design their content. However, Popup Builder comes with an additional, robust set of configuration options to customize the workspace. This allows the host application to build a workspace that matches their popup’s look and feel and that of the destination page.

For example, the host app can customize…

• The popup workspace background to view how the popup will look “in context” on the destination page.

• The theme and position of the popup for both desktop and mobile design modes.

The following sections will look at how to customize the workspace, starting with the common settings and working up to a full custom layout.

The Basics

Let’s start by looking at some of the differences between Page Builder and Popup Builder.

• Content Width

• HTML output

Content Width

In Email and Page Builder, the content area width is saved in the template. For example, if you start with an empty template, a default width that works for most scenarios is chosen, but the designer can adjust the message width slider. If you start with an existing template, the content width was chosen by the template’s designer using the message width slider in the the builder’s Settings tab.

With Popup Builder, the same template may have multiple contexts, and each context will likely have specific size requirements. For example, an exit-intent popup may have a max-width of 600px on a desktop with a classical layout centered on the screen. On the other hand, the host app may display the same template on mobile in the bar style docked at the bottom of the screen with a restricted width of 300px.

Since the content area’s width is tightly coupled to the context and layout, no one size fits all width is saved in the template. Instead, the host app will specify the width settings when the builder loads, based on the context of using the template. You’ll find an example in the common settings section below.

Popup Builder does not support fluid 100% width content.

HTML Output (HTML Partials)

In Email and Page Builder, the Beefree SDK HTML parser service converts your template into an HTML document customized for email or pages, respectively. However, the Popup Builder will not return a full HTML page because the host application is the final destination. In addition, Beefree SDKPopup Builder doesn’t provide the scripts to control the popup’s behavior, such as opening and closing. Rather, Popup Builder provides the HTML “partials” to embed within your popup’s content area or body.

The HTML partial will come with all the CSS required to look as it did in the preview mode. The parser service will wrap the content with a special container to clear all the host application styles and prevent style conflicts. The HTML output is designed to be embedded into any popup framework or application and still render the way it appears in the builder.

Popup workspace

Now that we covered the basic differences between Popup Builder and our other applications let’s discuss what you should expect when the builder starts.

As mentioned above in the Getting Started section, you will receive a ready-to-go design experience if no settings are provided. The default layout is a classic centered modal with a fixed width.

If the default popup style and layout suit your needs, then you are all set to start designing! You can load the builder without additional configuration and use the same standard controls and callbacks to access the HTML and JSON template.

What if you like most of the defaults but want to make some minor adjustments? We have you covered!

Common settings

Easily change the background to make the workspace look like the destination page where you’ll embed the popup.

beeConfig: {
  ...
  workspace: {
    popup: {
      backgroundImage: 'https://.../background.png',
      backgroundImageMobile: 'https://.../background.png',
      ...
    }
  }
}

If this option is not set, then we will provide a default skeleton layout. It’s worth noting at this point that you can apply every setting for both desktop and mobile design modes. That means you can have a different background when editing in Mobile Design Mode. We’ll show you how later!

Popup default layouts

One of the most common needs is changing the popup’s default-centered position to better match the end-user’s use case. Out-of-the-box, the Popup Builder comes with many of the most common popup layouts preconfigured. You can use any available presets “as is” or use them as starting points that you can fine-tune to your satisfaction.

beeConfig: {
  ...
  workspace: {
    popup: {
      layout: 'bar-top'
    }
  }
}

Here is a complete list of preset layouts:

Popup default themes

Another useful preset available is changing the popup’s styles from the default to better match the end-user’s use case. For example, if you’re using the popular Bootstrap CSS framework, you can select the “Bootstrap Theme” as your default. As with the default layouts, you can use any of the available preset themes “as is” or use them as starting points that you can fine-tune to your satisfaction.

beeConfig: {
  ...
  workspace: {
    popup: {
      theme: 'bootstrap'
    }
  }
}

Here is a complete list of preset themes:

Content area width

As mentioned above, the content area’s width is tightly coupled to the layout, no one size fits all width is saved in the template. All Popup Builder preset layouts come with a default width, which you can override with the following configuration settings.

workspace: {
  popup: {
    contentWidth: 600,
    contentWidthMobile: 300
  }
}

Continue to Popup Builder- Advanced Settings if you’d like to customize more than the position, background, and content area width.

Width settings

Let’s start by looking at some of the peculiarities of the Popup builder.

In Email and Page Builder, the content area width is saved in the template. For example, if you start with an empty template, a default width that works for most scenarios is chosen, but the designer can adjust the message width slider. If you start with an existing template, the content width was chosen by the template’s designer using the message width slider in the builder Settings tab.

With Popup Builder, the same template may have multiple contexts, and each context will likely have specific size requirements. For example, an exit-intent popup may have a max-width of 600px on a desktop with a classical layout centered on the screen. On the other hand, the host app may display the same template on mobile in the bar style docked at the bottom of the screen with a restricted width of 300px.

Since the content area’s width is tightly coupled to the context and layout, no one size fits all width is saved in the template. Instead, the host app will specify the width settings when the builder loads, based on the context of using the template. Here is a quick example:

workspace: {
  popup: {
    contentWidth: 600,
    contentWidthMobile: 300
  }
}

Two final notes:

• Popup Builder does not currently support fluid 100% width content.

• If you don’t specify a width, the application will apply a default one.

Layout settings

As mentioned before, you will receive a ready-to-go design experience when no settings are provided. The default layout is a classic centered modal with a fixed width.

If the default popup style and layout suit your needs, then your customers are all set to start designing! You can load the builder without additional configuration and use the same standard controls and callbacks to access the HTML and JSON template.

What if you like most of the defaults but want to do some minor adjustments? We have you covered!

Changing the background

You can easily change the background to make the workspace look like the destination page where your customer will embed the popup.

beeConfig: {
  ...
  workspace: {
    popup: {
      backgroundImage: 'https://.../background.png',
      backgroundImageMobile: 'https://.../background.png',
      ...
    }
  }
}

If this option is not set, then we will provide a default skeleton layout. It’s worth noting at this point that you can apply every setting for both desktop and mobile design modes. That means you can have a different background when editing in Mobile Design Mode.

Applying a preset layout

One of the most common needs is changing the popup’s default-centered position to better match the end-user’s use case. Out-of-the-box, the Popup Builder comes with many of the most common popup layouts preconfigured. You can use any available presets “as is” or use them as starting points that you can fine-tune to your satisfaction.

beeConfig: {
  ...
  workspace: {
    popup: {
      layout: 'bar-top'
    }
  }
}

Here is a complete list of preset layouts:

Many digital marketing campaigns start with an attention-grabbing popup. In fact, many such campaigns include a popup, a landing page, and one or more emails.

• A cool popup highlights something that the reader may be interested in

• A landing page provides more information and includes some sort of signup form

• Emails are sent to follow up.

Emails, pages, popups: three pillars of all sorts of digital marketing initiatives. Since Email Builder and Page Builder were already part of the Beefree SDK family, the natural next step was to create a Popup Builder. So here it is! This new version of the builder brings effortless popup creation inside your application.

Why Popups?

A popup is a small window that appears on a website visitor’s screen, asking for an email address in the most basic interaction or other actionable messages when using more sophisticated strategies (targeted promotions, social evidence messages, shopping cart recovery, etc.).

Popups are one of the most used online marketing tools. When done right, they capture visitors’ attention at the right moment, and push them forward in the customer journey. Despite attracting criticism in the past because they create a barrier between visitors and content, there’s plenty of evidence that they work. They will continue to play a strong part in any modern-day marketing strategy. Read our blog entry if you’re interested in learning more.

With this in mind, we have developed an embeddable solution for designing popups that you can easily deploy because:

• it’s built from the ground up to integrate seamlessly with your application;

• it’s easy to use, offers tons of design flexibility, and builds upon the same UX your customers already know from our Email & Page Builders;

• all data stays in your application, and you don’t have to ask your customers to use 3rd party tools for building popups. You can leverage our Form block to add forms to popups

Sample workflow

In terms of packaging the final output, Beefree SDK takes care of the Popup design and returns a solid HTML output ready to be injected on a website. On top of that, you can enrich the building experience by creating a workflow that will add to that output:

• Showing/closing behavior (e.g. display after N seconds, exit intent)

• “Additional” styles, for things like

  • Close button

  • Border radius

  • Drop shadows

The good thing: you can pass additional styles to your application, so they will reflect into the editing experience. You will then take the HTML produced by Beefree SDK and apply these styles for the final output.

Main features

Our drag&drop experience, loved by millions of users

There are over 4,500,000 sessions of our drag-n-drop email & landing page builders every month, across hundreds of applications around the world. Popup builder brings the same, great user experience that transforms non-designers in masterful content creators.

What you see is what you get...finally for Popups

You can load your customers' website home page as a background, so they can design a popup in the exact context where it will be used. And with Mobile design mode, your users are one click awaying to seeing and perfecting how the popup looks on mobile devices.

Designed to fit any configuration workflow

Position, size, background color, and more. Customize the builder each time to match how your customer configured their popup inside your application. What this means for you is flexibility, peace of mind, and implementation speed.

Ready-to-go HTML output

Get a solid HTML output ready to be injected on your customer’s website. Your application controls the display and behavior conditions, Beefree SDK takes care of the content.

Drop personalized content in popups, in minutes

Personalization is the secret weapon to attract any audience. With Merge tags and Display conditions your customers can show the right message at the right time, with use cases like product recommendations and personalized discount codes.

Speed up the creation process with shared and pre-made assets

Your customers will never have to recreate the same content over and over again. They can apply the same saved rows already available for emails, landing pages or other popups. Plus, you may also provide custom rows with ready-made dynamic content like coupon codes and best-selling items.

Creating an application

When you log into the Beefree SDK Console you can immediately see what type of applications you have already created under your Beefree SDK subscriptions.

Just head over to the “Popup Builder Application” section and click on Activate.

Once created, head over to “Details” for all server-side configurations. Paid applications allow you to create child development applications, to ease new feature testing, development, and maintenance.

All builders share the same core functionalities, including authentication and configuration. If you have already integrated our Email builder, you can re-use most of your work using the same configuration and callbacks.

Integrating the Popup Builder

Out-of-the-box, the setup and configuration are the same as Email and Page Builder. This section will cover the settings specific to Popup Builder. Check out our Getting Started guide if you’re new to Beefree SDK or unfamiliar with the configuration basics (as seen in the example below).

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  ...
}

Loading Popup Builder with no additional settings will give the end-user a beautifully designed popup and workspace to design their content. However, Popup Builder comes with an additional, robust set of configuration options to customize the workspace. This allows the host application to build a workspace that matches their popup’s look and feel and that of the destination page.

For example, the host app can customize…

• The popup workspace background to view how the popup will look “in context” on the destination page.

• The theme and position of the popup for both desktop and mobile design modes.

Continue reading to learn more on how to customize the workspace, starting with the common settings and working up to a full custom layout.

HTML output

In Email and Page Builder, the Beefree SDK HTML parser service converts your template into an HTML document customized for email or pages, respectively. However, the Popup Builder will not return a full HTML page because the host application is the final destination. In addition, Beefree SDK Popup Builder doesn’t provide the scripts to control the popup’s behavior, such as opening and closing. Rather, Popup Builder provides the HTML “partials” to embed within your popup’s content area or body.

The HTML partial will come with all the CSS required to look as it did in the preview mode. The parser service will wrap the content with a special container to clear all the host application styles and prevent style conflicts. The HTML output is designed to be embedded into any popup framework or application and still render the way it appears in the builder.

Developer resources

Our Github account has some resources that might help you out when testing and integrating the Popup Builder.

Sample code

Examples of different implementations and configurations that you can draw from to speed up your development.

Popup templates

A collection of ready-made templates that you can use right away and add to your application.