Saturday, July 27, 2019

If you want to detect if your app is running in Sizzy, you can do that by checking if the window.__sizzy object exists. It might be useful to do this check if you want to conditionally:

• Disable animations
• Switch a theme
• A/B test a feature
• etc.

Sizzy adds extra info about each device to the window.__sizzy object. Here's how a sample object would look:

{
	totalDevicesCount: 8,
         device: {
		index: 3,
		name: "iPhone 7",
		id: "iphone-7"
	}
}

This information is useful because you can use it to activate different features, themes, etc. based on the device name or the device index.

Example

Let's say that our app has 2 themes, dark and light, and we want to test both of them in Sizzy. So we want every device to have a different theme instead of switching between the two themes.

We can write this code:

const sizzy = window.__sizzy;
const darkTheme = sizzy.device.index % 2 === 0;

So then in our code we can easily set the theme to dark for every second device.

A/B testing

You can also use this information to enable/disable a feature on some of the devices. This is pretty useful for A/B testing.

Demo

We published an example here.

Try to open this url in Sizzy.