🚧
Work in progress
We're still writing this guide — details may change as it's finalized.
Integrations WordPress Web WooCommerce

Install on WordPress & Web

Add the SimplyClub drop-in to WordPress, WooCommerce, custom HTML, or any web platform — no Shopify app required.

Install on WordPress & Web

If you're not on Shopify, this is the install path. One <script type="module"> tag and a single setConfig call is enough to get the SimplyClub drop-in running on any web platform — WordPress, WooCommerce, custom HTML sites, single-page apps, or static pages.

The drop-in itself is identical to the Shopify one; only the way you load and wire it up differs.

Prerequisites

  • A PoiId from your SimplyClub dashboard. Contact SimplyClub support if you don't have one yet.
  • Ability to add a <script> tag to your site (theme file, footer plugin, custom HTML block, or your own templates).

The integration script

Paste this once per page, ideally just before </body>. Replace YOUR_POI_ID with the value from your SimplyClub dashboard.

<script type="module">
  import { dropInLoader } from "https://dropins.simplyclub.co.il/drop-ins/drop-in-loader/index.mjs";

  const instance = await dropInLoader.setConfig({
    poiId: "YOUR_POI_ID",
    starterBtn: {
      selector: "#simply-club-button"   // optional — any element to trigger the modal
    }
  });

  // Make the instance available to your own scripts
  window.simplyClub = instance;
</script>

That's the whole install. Everything else on this page is platform-specific guidance on where to put that script and how to wire it to the rest of your site.

WordPress

You have two reasonable paths. The plugin path is recommended because it survives theme updates.

Path A: Header/Footer plugin (recommended)

  1. Install WPCode, Insert Headers and Footers, or any equivalent plugin from the WordPress plugin directory.
  2. Open the plugin's settings.
  3. Paste the integration script into the Footer section.
  4. Save.

Refresh any page on your site — the drop-in is now loaded.

Path B: Edit footer.php directly

  1. WordPress admin → Appearance → Theme File Editor.
  2. Open your active theme's footer.php.
  3. Paste the script just before the closing </body> tag.
  4. Save.

Warning: changes to footer.php are lost when the theme updates. Use a child theme or the plugin path if you can.

Adding the trigger button (WordPress)

Add a button anywhere you want users to open the SimplyClub modal. In the block editor, drop a Custom HTML block and paste:

<button id="simply-club-button">Join the Club</button>

The starterBtn.selector in your setConfig call attaches to it automatically.

For sidebars and footers, use a Custom HTML widget with the same markup. For template files (single.php, page.php, etc.), paste the markup directly where you want the button.

WooCommerce

WooCommerce is a normal WordPress install — use either path above to load the script. Two extras make the integration "real":

  1. Sync the cart to SimplyClub so benefits know the right line items. WooCommerce exposes the cart server-side; pass a serialized version to the front-end and call setCart:
    <script>
  window.simplyClub?.commands.setCart({
    token: "wc-<?php echo get_option('woocommerce_cart_hash'); ?>",
    items: [
      <?php foreach (WC()->cart->get_cart() as $item): ?>
      {
        id: "<?php echo $item['product_id']; ?>",
        sku: "<?php echo $item['data']->get_sku(); ?>",
        name: "<?php echo esc_js($item['data']->get_name()); ?>",
        price: <?php echo (float) $item['data']->get_price(); ?>,
        quantity: <?php echo $item['quantity']; ?>
      },
      <?php endforeach; ?>
    ]
  });
</script>
  2. Send the order webhook to SimplyClub on checkout. See Order Webhook (Generic) for the full WooCommerce hook example.

Generic HTML / custom sites

Drop the script tag and the optional trigger button into your HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My Store</title>
  </head>
  <body>
    <header>
      <h1>Welcome</h1>
      <button id="simply-club-button">Join the Club</button>
    </header>

    <main>…</main>

    <script type="module">
      import { dropInLoader } from "https://dropins.simplyclub.co.il/drop-ins/drop-in-loader/index.mjs";
      const instance = await dropInLoader.setConfig({
        poiId: "YOUR_POI_ID",
        starterBtn: { selector: "#simply-club-button" }
      });
      window.simplyClub = instance;
    </script>
  </body>
</html>

The same pattern works for static-site generators (Astro, Eleventy, Hugo), framework apps (Next, Nuxt, SvelteKit), and embedded contexts — anywhere you control the page HTML.

Opening the modal without a button

If you don't want a dedicated button — for example, you want to open the drop-in from your existing "loyalty" menu link — drop the starterBtn config and call commands.show() directly:

<a href="#" onclick="window.simplyClub.commands.show(); return false;">My Club</a>

Connecting to your user system

The drop-in does not authenticate users itself — it uses your site's existing login.

When SimplyClub needs the user to sign in

Handle On.redirectToLogin and send the user to your login page:

instance.On.redirectToLogin(() => {
  // Remember where to come back after login
  localStorage.setItem("sc_post_login_redirect", window.location.href);
  window.location.href = "/wp-login.php"; // or your custom login route
});

After the user signs in

Once your site knows the user is logged in, tell the drop-in:

instance.commands.setUser({
  id: "user-123",
  firstName: "Dana",
  lastName: "Cohen",
  email: "dana@example.com",
  phone: "+972-50-1234567",
});

Clear it on logout:

instance.commands.setUser(null);

For WordPress specifically, you can inject the logged-in user from PHP:

<?php if (is_user_logged_in()):
    $u = wp_get_current_user(); ?>
<script>
  window.addEventListener('load', () => {
    window.simplyClub?.commands.setUser({
      id: "<?php echo $u->ID; ?>",
      firstName: "<?php echo esc_js($u->first_name); ?>",
      lastName: "<?php echo esc_js($u->last_name); ?>",
      email: "<?php echo esc_js($u->user_email); ?>"
    });
  });
</script>
<?php endif; ?>

Reacting to benefit selections

When the user picks a benefit, the drop-in fires benefitSelectionsChanged with the chosen promo. Persist it onto the cart/session so your checkout can apply the discount:

instance.On.benefitSelectionsChanged((data) => {
  // Store on the cart, post to your backend, etc.
  fetch("/wp-json/myshop/v1/apply-simply-discount", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });
});

The same data.serviceTranNumber (the transaction code) must travel with the order to SimplyClub's webhook after checkout — that's what links the order back to this session.

Configuration reference

Option Type Required Default Description
poiId string Yes — Your Point-of-Interest ID from SimplyClub.
starterBtn.selector string No — CSS selector for an element that opens the drop-in.
tagName string No simply-club-dropins Custom web-component tag name (rarely needed).
direction "ltr" | "rtl" | "auto" No "ltr" Layout direction for the drop-in UI. Use "rtl" for Hebrew/Arabic stores.

Example with every option:

const instance = await dropInLoader.setConfig({
  poiId: "your-poi-id",
  tagName: "simply-club-dropins",
  direction: "rtl",
  starterBtn: { selector: "#membership-button" },
});

Verify the install

  1. Open your site and check the browser console — no errors should appear from dropins.simplyclub.co.il.
  2. window.simplyClub should be defined (if you assigned it as in the examples).
  3. Clicking your trigger button (or calling window.simplyClub.commands.show()) opens the SimplyClub modal.
  4. If the user is logged in and you've called setUser, the modal greets them by name.

Troubleshooting

  • Modal never opens — confirm poiId is correct and the script's import succeeded (look for network errors in DevTools).
  • window.simplyClub is undefined — the script ran before import resolved. Use await (as in the examples) or set the assignment inside an .then().
  • Trigger button does nothing — the starterBtn.selector doesn't match anything. Inspect the button, confirm its id matches what you passed.
  • User shows as anonymous even when logged in — setUser was never called, or was called with null. Wire it to your login state.
  • Discount disappears at checkout — you're not persisting the selection from benefitSelectionsChanged onto the order. See Order Webhook (Generic) for the full handoff.

Related

  • Order Webhook (Generic) — call this from your backend after checkout so SimplyClub finalizes the loyalty transaction.
  • Membership CTA Web Component — embed the lightweight join/upgrade CTA outside the main drop-in.
  • Install on Shopify — the equivalent guide for Shopify stores.