arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

Workspaces

hashtag
Overview

In user interfaces, a workspace is a parameter that changes the appearance, settings, and widgets available in an builder, to help the user to focus on what matters.

In Beefree SDK, workspaces are an optional parameter that can be used to provide an experience focused on context and purpose, and to facilitate the outcome of an editing session.

You can load the builder with a certain workspace, but workspaces can also be changed by the user when editing, on-the-fly.

Switching between workspaces might change:

  • content visibility on the stage

  • tiles availability in the content tab

  • available previews

hashtag
Available workspaces

If no workspace is loaded at launch, the builder starts in its “Default” workspace.

We currently offer 3 additional workspaces, and we are planning to launch more as we evolve BEE and its capabilities.

These 3 workspaces revolve around the use of AMP content, and are provided so that you can tailor the experience of creating AMP emails in Beefree SDK.

Here is an overview of the different workspaces and their differences. Please for more information on using AMP in Beefree SDK.

default
mixed
amp_only
html_only

hashtag
Starting the builder with a workspace

Here is an example of loading Beefree SDK with a “mixed” workspace:

hashtag
Switching workspaces

You can implement a workspace selector within your application, so that users can switch between workspaces, by using the loadWorkspace(type) method.

First, you need to define template files for the workspaces you want to propose, as JSONs:

Then, you can load those workspaces at runtime:

And here is how to create a simple select to switch workspace:

hashtag
Workspace callbacks

After you load a workspace, the application will trigger one of these three callbacks:

hashtag
Success

hashtag
Failure

hashtag
Invalid workspace

hashtag
Use cases

The additional workspaces for AMP (AMP-only and HTML-only) can become helpful if you want to tailor the user experience of creating AMP emails, by adding:

  • a workflow where users decides if they want to create a standard message or an AMP-powered message (in the first case, AMP components will be hidden in the builder;

  • an option to switch between the HTML and the AMP editing of a message.

In addition, omitting the workspace, or loading the “default” workspace for certain users, has the effect of disabling AMP for those users, even when AMP content is enabled in the . This way, you can decide to make the feature available to customers of your application:

  • depending on the subscription plan that they are on (i.e. you could push users to a higher plan based on the ability to use AMP);

  • depending on the purchase of an optional feature (same);

  • only if they are “beta” customers, so they see it while keeping it hidden from the rest of your users.

outputs when saving a content
  • …and more!

  • HTML content

    AMP sidebar properties

    No

    Yes

    Yes

    No

    Available in preview

    HTML content

    HTML & AMP content

    HTML & AMP content

    HTML content

    onSave callback files

    HTML

    HTML & AMP

    HTML & AMP

    HTML

    Loading a template with AMP content

    The onWarning is triggered

    Template loads

    Template loads

    Template loads

    Loading a template with HTML content only

    Template loads

    Template loads

    Template loads

    Template loads

    Availability of the hide on AMP/HTML property

    Not available

    Yes

    Yes

    Yes

    Behavior for hidden for HTML/AMP content

    The onWarning is triggered

    Both are visible

    Only “hidden for HTML” content is visible

    Only “hidden for AMP” content is visible

    Stage message

    HTML content

    HTML & AMP content

    HTML & AMP content

    HTML content

    Content tiles

    HTML content tiles

    HTML & AMP content tiles

    refer to this page
    Beefree SDK Consolearrow-up-right

    HTML & AMP content tiles

    
    type ClientConfig = {
      workspace?: {
        type:'default'|'mixed'|'amp_only'|'html_only'
      }
      // ....
    }
    
    const beeConfig: ClientConfig = {
      workspace:{
        type:'mixed'
      }
      // ....
    }
    
    
    //Create the instance 
    function BeePlugin.create(token, beeConfig, (beePluginInstance) => { 
      //.... 
    }
    
    {
      "type":"mixed"
    }
    type Workspace = 'default'|'mixed'|'amp_only'|'html_only'
    
    const req = url => fetch(url).then(r => r.json())
    const loadWorkspace = async (workspace:Workspace) => {
      const { type } = await req(`https://example.com/workspaces/${workspace}.json`)
      beePluginInstance.loadWorkspace(type) 
    }
    <select id="workspace" onchange="loadWorkspace(this.value)">
    <option selected="selected" value="">WORKSPACE</option>
    <option value="default">DEFAULT</option>
    <option value="mixed">MIXED</option>
    <option value="amp_only">AMP_ONLY</option>
    <option value="html_only">HTML_ONLY</option>
    </select>
    //SUCCESS 
    onLoadWorkspace: function (workspace) {
      console.log(`workspace: ${workspace} has been loaded`);
    },
    //FAILURE
    onError: function (error) {
     console.error('error: ', error);
    },
    {
     code: 1400, 
     name: "Invalid workspace type",
     message: "RANDOM : is not a valid workspace",
     details: "Available workspaces are: [ default,mixed,amp_only,html_only ]"
    }