Why does my Popup Look Broken or Lose Styling?

You may be using a third-party page builder to design your FireBox campaigns or even use a 3rd-party Gutenberg block library plugin to build your FireBox campaigns. In both cases, the popup may appear fine in the editor but look broken or without styling when the popup is published on your site.

Why this happens

This happens because these plugins usually load their styles only on standard WordPress posts, pages, or custom post types. FireBox is a custom post type (firebox), however, the way popups are injected into your WordPress site is not a use case usually thought from these plugins, hence why their styles may not automatically apply inside popups.

If you encounter this issue:

• Contact the support team of the plugin you’re using (3rd-party page builder or Gutenberg block library) and ask if they can ensure their styles are also loaded in FireBox campaigns. They may provide a settings page to whitelist our custom post type or they may require you to add a filter to your theme. Having them solve this issue will certainly help other plugins that had the same problem as well.
• If they need any technical details from our side, feel free to reach out to us and we’ll be glad to assist.

Known Issues & Workarounds

GeneratePress

If you're using GeneratePress blocks in your FireBox campaigns, your campaign may appear properly styled in the editor, but once you publish it, it may look off. To resolve this issue, edit your theme's function.php file and add the following PHP snippet. This essentially tells GeneratePress to whitelist FireBox in order for it to generate all its block styles.

add_filter( 'generateblocks_do_inline_styles', function( $do ) {
   if ( 'firebox' === $post_type ) {
       $do = true;
   }
   return $do;
} );