Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. User
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. User

Loyalty

The <salla-loyalty> web component is used to display a popup that represents the Loyalty program. This program enables the store's customers to benefit from collecting the points for vouchers and offers provided by the store. Once they have collected enough points, the customers will be eligible to redeem them for exciting gifts or products.
It consists of a Modal activated by the Button component, and that can be customized using the properties' parameters available.
Note
Available API Endpoints for the Loyalty component are:
Get Program
Reset
Exchange

Example#

Loyalty Image

Usage#

HTML

Properties#

PropertyAttributeDescriptionTypeDefault
Customer Pointscustomer-pointsAvailable customer points with which they can exchange.numberundefined
Guest Messageguest-messageMessage to show for guest users.stringundefined
Prize Pointsprize-pointsThe exchanged prize point.number | stringundefined
Prize Titleprize-titleThe exchangable prize title.stringundefined

Methods#

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as open and close the Loyalty modal.
MethodDescriptionReturn Type
open()Shows loyalty modalPromise<any>
close()Hides loyalty modalPromise<HTMLElement>
exchangeLoyaltyPoint()Exchanges loyalty points with the selected prize itemPromise<any>
resetExchange()Cancels exchanged prizesPromise<any>
Modified at 2025-03-04 12:54:02
Previous
Login
Next
Rating