New Feature: Multi-State Box

Be in the know
,
1

Check out our new Corvid-integrated editor element, multi-state box!

With multi-state boxes, you can display different content for different situations and let site visitors easily navigate multiple displays.

For example, you can:

  • Show different site content if a shopping cart is empty or full.

  • Show a preloader while a page is loading.

  • Let site visitors navigate what appear to be multiple tabs.

  • Create a custom multi-step form.

  • Show different site content depending on whether there’s an upcoming event.

1185×719 242 KB

To set up your multi-state box, follow this general procedure:

  1. Add a multi-state box to your page from the Interactive section of the Add panel.

  2. Set up your states so they each display the content you want.

Then add code to define when each state will be displayed:

  1. Define a condition (for example, a site visitor clicked a button, a product is out of stock).

  2. Select your multi-state box using its ID .

  3. Apply the changeState( ) function with the state you want to move to.

Learn more:

2

How can we add a step manually? I can’t see how to do that.

3

Hi,
You can do that from the “Manage States” Button > “Add New State”

1678×1238 180 KB

Learn more here: https://support.wix.com/en/article/manage-states

4

Oh, silly me!

5

How is this different from a slideshow if I want to use it for a multi-step form.

Is it lighter/faster to load than Box Slideshows?

6

For starters, you can’t add certain elements to slideshow. Am I right?

7

@contact53319
yes, also, you can have different heights for different states

8

Exactly.

9

This is exactly what I needed. I was using collapsible boxes since slideshows couldn’t have different heights. This makes it so much easier. Great addition!

10

Glad to hear it! Thanks for the feedback.

11

Since it’s not a beta, should we be able to access it even if we’re admin on an account? Not seeing it unless we’re the owners of the site.

12

Yes, contributors with permission to work in the editor (e.g. admins) should be able to add a multi-state box. Make sure the contributors have enabled Corvid Dev Mode (click Dev Mode in the editor top bar and then click Turn on Dev Mode ). Let us know if you’re still having trouble.

13

@talyaro Dev mode was the key. Thanks!

14

The API is not working. It doesn’t recognize the code…

15

Can you please paste a snippet of your code?

16

@uval-blumenfeld-wix I just tried to use the changeState method and it says it is not a valid method/property, in the editor and live site. This happens almost all the time with new elements and APIs, but usually they work in the live site only. After some days it might work…

17

@pptgames That shouldn’t happen. Can you please share the site URL and page where it’s happening?

18

@uval-blumenfeld-wix Oh! I was wrong, I used “stateboxState1” thinking that’s the MultiStateBox’s ID, but it’s the ID of one of the box’s states. My bad. It’s all working :slight_smile:

19

Thanks for this important feature!
P.S.
It’d be even greater if we could set a certain element to appear in several states (as of now a certain element can be assigned to one state only (but I know this request is not trivial and requires some complicated logic ).

20

Another thing: if I duplicate a state, the new duplicated state loses its design on mobile (it’s fine on desktop). This is pretty annoying, because it’s a lot of work to re-design it.