---
title: Preview Mode and stylingVersion
tags: [dropin, preview, styling, frontend, wordpress]
---

Show the **real** Dropin on your own design screen, with the changes the merchant has not saved yet, repainted as they type. And make saved changes reach the storefront on the next page load instead of after the browser cache runs out.

> **In short** - `setConfig({ preview: {...} })` turns the Dropin into a live preview that sends nothing to SimplyClub. `instance.preview.update({...})` repaints it. On the storefront, `setConfig({ stylingVersion })` makes a saved change show at once.

> [!NOTE]
> Staging only for now (`env: "test"`). Production follows in a later release.

---

## 1. Preview mode

Load the Dropin as usual and add `preview` to `setConfig`:

```js
const { dropInLoader } = await import(
  "https://simply-drop-ins-2.onrender.com/drop-ins/drop-in-loader/index.mjs"
);

const instance = await dropInLoader.setConfig({
  poiId: "<the store's poiId>",
  env: "test",
  preview: {
    styling: { primaryColor: "#E91E63", logoUrl: "https://example.com/logo.png" },
    texts: { send_code: "Send me a code" },
    shopper: "guest",
  },
});
```

What the Dropin does in preview mode:

- Reads the store's **saved** look and texts once, and lays your `styling` and `texts` over them.
- Answers every other call itself, with sample benefits for the cart (points to redeem, a discount to pick, one applied by itself), so the member's "choose benefits" screen can be tried.
- Nothing reaches SimplyClub: a code is "sent" to nobody, any code is accepted, a signup creates no member, and the signed-in member is a sample one (Dana, 120 points).
- Stores nothing in the browser (no localStorage, no cookies) and reports nothing to Sentry.

### Options

| Field | Meaning |
|---|---|
| `styling` | Changes over the saved look. Same fields as `PATCH /styling` in the [Styling and Texts API](/content/dropins/styling-and-texts-api). |
| `texts` | Changes over the saved texts, `key: text`. Same keys as `GET /texts/:lang`. |
| `lang` | Language of `texts`. Default `"he"`. |
| `shopper` | `"guest"` (default): the joining and sign-in screens. `"member"`: a signed-in member's home. |
| `memberName` | The sample member's first name. Default `"Dana"`. |
| `cart` | The cart the member's "choose benefits" screen works on, same shape as `commands.setCart`. Default: a two-product sample (250). |

### Repaint as the merchant edits

```js
instance.preview.update({ styling: { primaryColor: "#2E7D32" } });
instance.preview.update({ texts: { send_code: "Get a code" } });
```

- Send only what changed. Earlier changes stay.
- `undefined` on a field puts the store's saved value back.
- `null` or `""` shows "none" (for example no logo), the way an emptied field saves.
- The widget is not reloaded, so the screen that is open stays open.

### Guest or member

```js
instance.preview.setShopper("member");
instance.preview.setShopper("guest");
```

The window closes and opens again on the screen that shopper gets.

### Terms and welcome message

The terms text and the new-member greeting are styling fields too, so they repaint like any other:

```js
instance.preview.update({ styling: { termsAndConditions: editorHtml } });
instance.preview.update({ styling: { welcomeMessage: editorHtml } });
```

Neither screen is one the preview lands on by itself, so open the window on it while the merchant edits it:

```js
instance.preview.showStep("termsAndConditions"); // the terms the shopper accepts
instance.preview.showStep("welcome");            // the greeting after signup
```

- Works for a guest and for a member. `setShopper` (even with the same shopper) goes back to that shopper's usual screen.
- An open window switches screen; a closed one opens on it.
- Calling it again shows the screen again: after "Continue" is clicked in the preview, the window has moved on.

The SimplyClub Dashboard does it with one switcher above the preview, which is a good pattern to copy:

| Option | Call |
|---|---|
| Guest | `preview.setShopper("guest")` |
| Member | `preview.setShopper("member")` |
| Terms | `preview.showStep("termsAndConditions")` |
| Greeting | `preview.showStep("welcome")` |

Clicking the option already selected calls it again. Focusing the terms or greeting editor also selects its option.
- An empty `welcomeMessage` still shows the greeting's title in preview, so clearing the field does not throw the merchant off the screen. On the storefront an empty one is skipped.
- Save them with `PATCH /styling` like the other fields, see the [Styling and Texts API](/content/dropins/styling-and-texts-api). The Dashboard's editor saves HTML; Markdown works too.
- Older loaders have no `showStep`: check `if (instance.preview.showStep)` before calling it.

### Open and close the window

```js
instance.commands.show();
instance.commands.hide();
```

The window listens for `show` only once the `<simply-club-dropins>` element is on the page; an earlier call does nothing. Wait for the element, then open:

```js
const started = Date.now();
(function openWhenMounted() {
  if (document.querySelector("simply-club-dropins")) {
    setTimeout(() => instance.commands.show(), 400);
  } else if (Date.now() - started < 10000) {
    setTimeout(openWhenMounted, 100);
  }
})();
```

### Notes

- Call `setConfig` **once** per page or iframe. After that, only `preview.update`.
- Call these from your page's code. Calls typed into the browser console are blocked.
- The loader is cached by browsers for a long time. If a preview page must always get the current one, import it with a query of its own, for example `index.mjs?preview=<timestamp>`.

---

## 2. `stylingVersion`: saved changes show at once

The Dropin reads the store's look and texts from SimplyClub, and browsers cache those reads for a few minutes. So after `PATCH /styling` or `PUT /texts`, the storefront can keep the old look for a while.

Pass the time of the last successful save as `stylingVersion`:

```js
dropInLoader.setConfig({
  poiId: "<the store's poiId>",
  env: "test",
  stylingVersion: 1792411193,
});
```

- Any string or number works. When it changes, the browser asks for the look again.
- Without it, everything works as before, only slower to update.
- A change made in the SimplyClub Dashboard (not through your plugin) does not change your value, so it can still take a few minutes.

WordPress example:

```php
// After PATCH /styling or PUT /texts succeeds:
update_option( 'scwl_styling_version', time() );

// When printing setConfig on the storefront:
$styling_version = (int) get_option( 'scwl_styling_version', 0 );
// ... stylingVersion: <?php echo (int) $styling_version; ?>
```