Newsletter & Events Widgets

Newsletter Widget Examples

Default Theme

<newsletter-widget organization-id="your-organization-id"></newsletter-widget>

Dark Theme

<newsletter-widget
    organization-id="your-organization-id"
    input-background-color="#23272a"
    input-text-color="white"
    input-border="1px solid white"
    input-placeholder-color="white"
    button-color="#23272a"
    button-text-color="white"
    button-border="1px solid white">
</newsletter-widget>

Events Widget Examples

List View

<events-widget organization-id="your-organization-id"></events-widget>

Grid View with Custom Theme

<events-widget
    organization-id="your-organization-id"
    view="grid"
    grid-columns="3"
    border-radius="20px"
    border-color="#7883f7"
    button-color="#7883f7"
    number-of-events="4">
</events-widget>

Tickets Widget Examples

Default View

<tickets-widget organization-id="your-organization-id" event-id="your-event-id"></tickets-widget>

Custom Theme

<tickets-widget
    organization-id="your-organization-id"
    event-id="your-event-id"
    border-radius="20px"
    border-color="#7883f7"
    button-color="#7883f7"
    number-of-tickets="4">
</tickets-widget>

Installation

Add this script to your HTML:

<script src="https://js.membrz.club/widget.js"></script>

Documentation

For full documentation of all available attributes, see below:

Newsletter Widget Attributes

Required:

organization-id: Your organization ID

Optional:

button-color: Button background color (default: "#F75201")
button-text-color: Button text color (default: "#ffffff")
button-border: Button border style (default: "none")
button-text: Custom button text (default: "Subscribe")
input-background-color: Input background color (default: "#ffffff")
input-text-color: Input text color (default: "#000000")
input-border: Input border style (default: "1px solid #ddd")
input-placeholder-color: Placeholder text color (default: "#666666")
input-placeholder: Input placeholder text (default: "Enter your email")
input-gap: Gap between input and button (default: "8px")
success-message: Custom success message (default: "Thanks for subscribing!")
font-family: Custom font family (default: system font stack)
border-radius: Custom border radius (default: "4px")
responsive-direction: Flex direction on mobile devices (default: "row"). Possible values: "row", "column"

Events Widget Attributes

Required:

organization-id: Your organization ID

Optional:

view: Display mode - "list" or "grid" (default: "list")
grid-columns: Number of columns in grid view (default: 3)
number-of-events: Limit the number of events displayed (integer)
hide-location: Hide the event location (default: false)
button-color: Button background color (default: "#F75201")
button-text-color: Button text color (default: "#ffffff")
button-border: Button border style (default: "none")
button-text: Custom button text (default: "View Event")
background-color: Card background color (default: "#ffffff")
primary-text-color: Primary text color (default: "#000000")
secondary-text-color: Secondary text color (default: "#666666")
border-color: Border color (default: "#ddd")
border-radius: Border radius (default: "4px")
font-family: Custom font family (default: system font stack)

Tickets Widget Attributes

Required:

organization-id: Your organization ID
event-id: The ID of the event to display tickets for

Optional:

number-of-tickets: Limit the number of tickets displayed (integer)
button-color: Button background color (default: "#F75201")
button-text-color: Button text color (default: "#ffffff")
button-border: Button border style (default: "none")
button-text: Custom button text (default: "Buy Ticket")
background-color: Card background color (default: "#ffffff")
primary-text-color: Primary text color (default: "#000000")
secondary-text-color: Secondary text color (default: "#666666")
border-color: Border color (default: "#ddd")
border-radius: Border radius (default: "4px")
font-family: Custom font family (default: system font stack)