Dynamic Lightbox Classic

Copilot v2.0.0-beta1

Configuration API – reference

What is Configuration API? It is our new API introduced in Copilot v2 which aims to provide advanced automation capabilities.

Use cases:

Client Wizards
Automated site generations workflows

How it could work:

Inject our App as hidden iframe (enable client side CSS building)
Use our Configuration API (Broadcast Channel API under the hood)

Why Client side CSS build via iframe

CSS is front facing of application and building it server side is limited as server has less clue around computed styles than client side methods. Under the hood we use libraries for color manipulation, contrast checking, and have evaluator which enables programmatic contrast relations and this things could only be done at the front so we could use browser as tool to evaluate computed values.

Initializing communication channels

This is like telling to browser to make cross tab channels to send/get data. After defining we could send data using .postMessage or subscribe to listen data on some channel.

/*1. Push user choices from your configuration to our app*/
const setChannel = new BroadcastChannel("headspin_configurator_api_set");

/*2. Get configuration API current data*/
const getChannel = new BroadcastChannel("headspin_configurator_api_get");

/*3. Catch improper commands, use it in dev to have feedback around allowed types*/
const errChannel = new BroadcastChannel("headspin_configurator_api_error");

Set Channel

After defining channels to communicate, we could now tell app to change configuration and save data via setChannel:

Set brand color

setChannel.postMessage({
  action: "brandColor",
  param: "#facc15"
});
/*<param/> any valid color*/

Set neutral color

setChannel.postMessage({
  action: "neutralColor",
  param: "#facc15"
});
/*<param/> any valid color*/

Set project radius preset

setChannel.postMessage({
  action: "projectRadiusPreset",
  param: "medium"
});
/*<param/> none | small | medium | large | full*/

Set project component spacing preset

setChannel.postMessage({
  action: "componentSpacingPreset",
  param: "m"
});
/*<param/>  xxs | xs | s | m | l | xl | xxl*/

Set project section spacing preset

setChannel.postMessage({
  action: "sectionSpacingPreset",
  param: "m"
});
/*<param/>  xxs | xs | s | m | l | xl | xxl*/

Set project font size

setChannel.postMessage({
  action: "fontSizePreset",
  param: "m"
});
/*<param/>  xxs | xs | s | m | l | xl | xxl*/

Set project line-height preset

setChannel.postMessage({
  action: "lineHeightPreset",
  param: "m"
});
/*<param/>  xxs | xs | s | m | l | xl | xxl*/

Set disable/enable line-height presets

setChannel.postMessage({
  action: "disableEnableLineHeight",
  param: "disable"
});
/*<param/>  disable | enable */

Set project mode (light/dark)

setChannel.postMessage({
  action: "themeMode",
  param: "light"
});
/*<param/>  light | dark */

Save configuration and output CSS

setChannel.postMessage({
  action: "saveApp",
  param: "save"
});
/*<param/>  save */

Get configuration current state app data

If we need to sync wizard with theme generator, we could use getChannel for that task. Getting all configuration API current state data is easy as

/*1. === We need to subscribe to listen response*/
getChannel.onmessage = (event) => {
    console.log(event.data)

};
/*2. === Let's grab data*/
getChannel.postMessage({
    action: "get",
});

/* 
=== This should log something like ===
{
  "data": {
    "brandColor": "#0090ff",
    "neutralColor": "#8e8c99",
    "projectRadiusPreset": "medium",
    "componentSpacingPreset": "m",
    "sectionSpacingPreset": "m",
    "fontSizePreset": "m",
    "lineHeightPreset": "m",
    "disableLineHeight": true,
    "themeMode": "light"
  }
}
*/

Error Channel

We could subscribe to error channel to listen for incorrect data setting:

/*1. === We need to subscribe to listen response*/

  errChannel.onmessage = (event) => {
      console.log(event.data)
  };
  
/*2. === We could get feedback if doing something wrong for example setting fontSizePreset to numerical value 100px would tell us that under that action allowed values are xxs-xxl
{
  data: {
    action: "action::fontSizePreset",
    context: "allowed values: xxs | xs | s | m | l | xl | xxl"
  }
}
*/

Headspin Copilot v1.4.0

Component Madness 2024

Age Verification in Breakdance

We’ve release 3 components which you could user to verify users before showing sensitive content. While it is pretty easy to this in Breakdance and could be done in 20mins, some users may struggle with logic and making small code to check and set cookie.

Variation	Verfication type	Video	Link to solution
1	Year input	Link	LINK TO COMPONENT
2	Date input (day, month and year inputs)	Link	LINK TO COMPONENT
3	Button (Yes/No)	Link	LINK TO COMPONENT

Setup instructions

Breakdance popup template setup

Please navigate: WP Admin > Breakdance > Popups

In top left corner click add new popup.

Click on newly created popup settings. Now we need to set where it applies. In this demo we’ll apply it Everywhere to lock whole site access before visitor verifies age. Mostly this is what you want, but you may want exclude login pages, or apply to certain page. So this may depend on yours particular case.

After doing this, we need to make our popup design.

Breakdance age verification configuration

To recap, we’ve created popup, added Location rule. Now we need to open created popup, and style it. We need to style it to cover whole screen, and disable closing options because only if user verified age popup should close.

Age Verification – Year setup (VIDEO)

Open code block and you will code at the top like this. You only need to edit these values to own needs. Code below these lines is functionality code which you should leave as it is.

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INVALID_AGE_MESSAGE = "Please enter a valid age.";
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

Variable	Desc
COOKIE_DURATION_IN_DAYS	Sets how long should cookie last in days.
REQUIRED_AGE	Sets how old user should be to pass verification in years.
INVALID_AGE_MESSAGE	Message which appears when user tries invalid value inside input field which could not be translated to age.
INSUFFICENT_AGE_MESSAGE	Message which appears when user is younger than required age settings

Age Verification – Date setup (VIDEO)

Open code block and you will code at the top like this. You only need to edit these values to own needs. Code below these lines is functionality code which you should leave as it is.

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INVALID_AGE_MESSAGE = "Please enter a valid age.";
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

Variable	Desc
COOKIE_DURATION_IN_DAYS	Sets how long should cookie last in days.
REQUIRED_AGE	Sets how old user should be to pass verification in years.
INVALID_AGE_MESSAGE	Message which appears when user tries invalid value inside input field which could not be translated to age.
INSUFFICENT_AGE_MESSAGE	Message which appears when user is younger than required age settings

Age Verification – Yes/No setup (VIDEO)

Open code block and you will code at the top like this. You only need to edit these values to own needs. Code below these lines is functionality code which you should leave as it is.

// Configuration
const COOKIE_DURATION_IN_DAYS = 30;
const REQUIRED_AGE = 18;
const INSUFFICENT_AGE_MESSAGE = `You must be over ${REQUIRED_AGE}`;

Variable	Desc
COOKIE_DURATION_IN_DAYS	Sets how long should cookie last in days.
REQUIRED_AGE	Sets how old user should be to pass verification in years.
INSUFFICENT_AGE_MESSAGE	Message which appears when user is younger than required age settings

Testing tips

While you are playing with this you should know how to remove cookie. Because you may want multiple times to test, and because your login also relies on cookie so if you remove all of them you will be logged out each time.

Method 1: Please just use browser dev tools it is easy. You could open them with right click + inspect. When they open find Storage tab and click on it. There you will see Cookie section, click on it and find “age_verification_passed_hsx” cookie. Right click on that cookie and it will delete just that cookie.

After doing this reload browser tab to see changes.

Method 2: Another way is to open browser console and drop this small code:

document.cookie = "age_verification_passed_hsx=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
window.location.reload();

Client vs Server side protection

These examples demonstrates client side popup implementation. As these are not the some big security measures and easiest way to cheat this is entering just wrong age. Because this alone is not some rocket science protection so keep in mind that technical user could just go to inspector tools and remove this lock. But we think it is easier for 99% visitor to enter wrong age and bypass this than going to developer tools.

Slightly stronger protection would be setting up this as templates, but you may need also hide header and footer templates. Also we advise you to turn off caching fully if you are using server side approach as caching will break template logic because verified user could cache page which will bypass PHP conditions completely.

Do it on your own (server side setup)

If you opt for this below we are giving below setup instructions how you could do it like described below (NOTE: we don’t provide support for this as it will be tons of tickets related to cache problems as user would still want to cache, and page caching should be fully off)

Template type	Content	Priority	Location	Condition
Header	Blank	2000	Everywhere	Custom PHP – (1)
Template	Component code	2000	Everywhere	Custom PHP – (1)
Footer	Blank	2000	Everywhere	Custom PHP – (1)

Custom PHP condition code (1)

return !isset($_COOKIE['age_verification_passed_hsx']);

Make new custom template, set location to Everywhere. For condition we’re going to check cookie by custom PHP so add that condition and click Open PHP Editor.

In PHP Editor paste code that we’ve provided.

For priority there isn’t some magical number, it should be greater than any other templates so we’ve used 2000. Only important note here it should be higher than any other template. In Template paste just component code which will set cookie.

For Header/Footer we may also want to hide them as they could have some data which should not be shown to user so create just Header, Footer with no content and do the same settings for them. This will just load empty Header/Footer for non-verified users.

Legal disclaimer

This solution let’s you set age and cookie duration. It is pretty simple solution which is seen on many sites. But before implementing keep in mind to obey laws and rules of the countries where sites needs to operate. We provide this solution as it is. If you are not sure is this verification enough, we kindly advise you to check and consult around these compliance things with legal experts.

Lean. Clean. Machine.

Day 1	Age Verification	Variant 1 Variant 2 Variant 3
Day 2	Skip Link	Variant 1
Day 3	Hotspot	Variant 1
Day 4	Grid Switcher	Variant 1
Day 5	Morphing Tabs	Variant 1
Day 6	Animated Stacking Cards	Variant 1
Day 7	Sub-navigation	Variant 1 Variant 2

Dynamic Lightbox Classic

Copilot v2.0.0-beta1

Configuration API – reference

Headspin Copilot v1.4.0

Component Madness 2024

Age Verification in Breakdance

Lean. Clean. Machine.

Headspin UI Copilot v1.3

Brandy template documentation

Dynamic Lightbox Classic

Overview

Documentation

More examples

You might also like

Dynamic Tabs Repeater

Dynamic Lightbox Iframe

Dynamic Tabs Loop

Dynamic accordion