Preview Mode and stylingVersion

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.

---

1. Preview mode

Load the Dropin as usual and add preview to setConfig:

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.
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

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

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:

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:

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. 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

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:

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:

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:

// 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; ?>