Simply Club DropIns - Integration Guide

Quick Start

Add this script to your website before the closing </body> tag:

<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_HERE"
  });
</script>

⚠️ Get Your POI ID

Contact SimplyClub support to get your POI ID before integrating.

Complete Example

Here's a full working example with all common features:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <button id="click-me">Join Simply Club</button>
  <button id="logout">Logout</button>
  <button id="open-manually">Open Modal</button>
  
  <script type="module">
    import { dropInLoader } from "https://dropins.simplyclub.co.il/drop-ins/drop-in-loader/index.mjs";

    dropInLoader
      .setConfig({
        poiId: "YOUR_POI_ID_HERE",
        starterBtn: {
          selector: "#click-me"  // This button will open the modal automatically
        }
      })
      .then((self) => {
        // Open modal manually from another button
        document.getElementById("open-manually").addEventListener("click", () => {
          self.commands.show();
        });

        // Logout handler
        document.getElementById("logout").addEventListener("click", () => {
          self.commands.logout();
        });

        // Set cart data
        self.commands.setCart({
          items: [{ id: "product-123", price: 150, title: "Product Name", sku: "SKU-001" }]
        });

        // Set user data
        self.commands.setUser({
          id: "user-123",
          firstName: "John",
          lastName: "Doe",
          email: "john@example.com",
          phone: "0501234567"
        });

        // Listen to events
        self.On.benefitSelectionsChanged((e) => {
          console.log("Benefits changed:", e);
        });

        self.On.redirectToLogin(() => {
          window.location.href = "/login";
        });
      });
  </script>
</body>
</html>

💡 Button Options

Use starterBtn.selector to automatically attach to a button, or call instance.commands.show() programmatically from within the promise callback.

Configuration

Property	Type	Required	Description
`poiId`	`string`	Required	Your Point of Interest ID
`starterBtn.selector`	`string`	Optional	CSS selector for button that opens the modal

API Reference

Commands

commands.show()

Opens the Simply Club modal.

instance.commands.show()

commands.hide()

Closes the Simply Club modal.

instance.commands.hide()

commands.setUser(user)

Sets the current user data. Pass null to clear.

instance.commands.setUser({ id, firstName, lastName, email, phone })

commands.setCart(cart)

Sets the shopping cart data.

instance.commands.setCart({ items, cartToken })

Required for each item:

id OR line_id OR product_id (at least one)
price
description OR name OR title (at least one)
sku OR SKU (at least one)

All other fields are optional.

commands.logout()

Logs out the current user.

instance.commands.logout()

commands.getSession()

Gets the current session data.

instance.commands.getSession()

Events

On.benefitSelectionsChanged(callback)

Fired when user selects or changes benefits.

instance.On.benefitSelectionsChanged((data) => { ... })

On.redirectToLogin(callback)

Fired when user needs to be redirected to login.

instance.On.redirectToLogin(() => { ... })

On.transactionCodeCreated(callback)

Fired when a transaction code is created.

instance.On.transactionCodeCreated((data) => { ... })

On.membershipProductSelected(callback)

Fired when a membership product is selected.

instance.On.membershipProductSelected((data) => { ... })

Need Help?

Contact SimplyClub support:

simplyclub.co.il | 03-9192513