Get to know our frameworks

Select an app template built on your preferred framework.

Build apps on our native app editor. Use drag and drop elements, Velo code and Wix APIs to develop custom features.

Streamline your app development process with the Wix CLI. Get a familiar developer experience with minimal setup and configuration.

Take full control over your app's tech stack, deployment, and hosting.

App templates

Wix Blocks templates

Wix CLI templates

Self-hosted templates

Kickstart your app development with templates built on your preferred Wix developer tool. Browse templates for practical foundation and get to know the Wix ecosystem.

Wix App Templates for Developers

This example apps can be used as a starting point for building your own app, for concrete examples of how to use Wix framework, or for inspiration.

Choose a template.<0 />Build an app.

Browse by:

How to build it step by step:

This template is built with:

Read how this template was built, step by step.

How we built this template

Deployment instructions:

Choose a package manager and run the command in your terminal.

Copy command

Before you get started, make sure you have the following:

Prerequisite steps

Get started with Wix CLI

Begin by setting up your Next.js project with your preferred hosting platform.

Select your hosting service

Start the deployment flow and set up your template repo on Netlify. After you finish set up, come back here and add your Netlify custom domain.

Copy the code from our Git repo to deploy your app on any platform that supports Next.js.

Start the deployment flow and set up your template repo on Vercel. After you finish set up, come back here and add your Vercel generated URL.

Add the base URL and give your app a name.

App details

Go to the app dashboard and test your app to ensure a smooth integration within the Wix ecosystem. <0>Learn more about app checks and testing</0>

Define your environment

Terminal

Related templates

Note

Warning

Your app name will be used as the namespace suffix.

Name your app to generate a namespace. This lets you refer to your app in code later on.

Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

rewards

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function bulkCreateRewards(rewards) {
  const response = await wixClient.rewards.bulkCreateRewards(rewards);
}

bulkCreateRewards() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: dashboard.auth(),
  host: dashboard.host()
});

async function bulkCreateRewards(rewards) {
  const response = await wixClient.rewards.bulkCreateRewards(rewards);
}

bulkCreateRewards() with Dashboard app access

bulkCreateRewards

BulkCreateRewardsResponse

reward

Reward

Creates a reward that can be redeemed with loyalty points.

When a customer redeems a reward, a loyalty coupon is created
based on the specifications detailed in either the `discountAmount` or `couponReward` fields. This coupon can
then be used by the customer to receive the discount. Note that while the Rewards API uses coupon scopes and specifications,
no coupon is actually created until a reward is redeemed with points.
See the Coupons API for more information about coupons.

A reward's `active` status defaults to `false`. To make the reward available to customers,
either set the `active` field to `true` during creation or call [`updateReward()`](#updatereward)
to change the status.

To customize a reward for each loyalty tier, use the `configsByTier` parameter.
This allows you to specify the amount of the earned discount, the cost in loyalty points
to redeem the reward, and the tier to which this configuration applies. Each tier requires its own
`configsByTier` configuration. To create a reward that is available to loyalty accounts in the base tier,
leave the `tierId` field empty. See the Loyalty Tiers API for more information on tiers.

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function createReward(reward) {
  const response = await wixClient.rewards.createReward(reward);
}

createReward() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: dashboard.auth(),
  host: dashboard.host()
});

async function createReward(reward) {
  const response = await wixClient.rewards.createReward(reward);
}

createReward() with Dashboard app access

createReward

string

Revision number, which increments by 1 each time the reward is updated.

To prevent conflicting changes, the current `revision` must be passed when deleting the reward.

revision

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function deleteReward(id, revision) {
  const response = await wixClient.rewards.deleteReward(id, revision);
}

deleteReward() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: dashboard.auth(),
  host: dashboard.host()
});

async function deleteReward(id, revision) {
  const response = await wixClient.rewards.deleteReward(id, revision);
}

deleteReward() with Dashboard app access

deleteReward

void

import { createClient, OAuthStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards } ,
  auth: OAuthStrategy({ clientId: 'MY-CLIENT-ID' })
});

async function getReward(id) {
  const response = await wixClient.rewards.getReward(id);
}

getReward() with visitor/member access

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function getReward(id) {
  const response = await wixClient.rewards.getReward(id);
}

getReward() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: dashboard.auth(),
  host: dashboard.host()
});

async function getReward(id) {
  const response = await wixClient.rewards.getReward(id);
}

getReward() with Dashboard app access

getReward

options

ListRewardsOptions

Retrieves a list of rewards.

The list includes rewards that are currently nonredeemable due to insufficient points held by any customers.

import { createClient, OAuthStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards } ,
  auth: OAuthStrategy({ clientId: 'MY-CLIENT-ID' })
});

async function listRewards(options) {
  const response = await wixClient.rewards.listRewards(options);
}

listRewards() with visitor/member access

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function listRewards(options) {
  const response = await wixClient.rewards.listRewards(options);
}

listRewards() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: dashboard.auth(),
  host: dashboard.host()
});

async function listRewards(options) {
  const response = await wixClient.rewards.listRewards(options);
}

listRewards() with Dashboard app access

listRewards

ListRewardsResponse

query

CursorQuery

Retrieves a list of rewards, given the provided paging, filtering, and sorting.

Query Rewards runs with these defaults, which you can override: `cursorPaging.limit` is `50`.

To learn about working with _Query_ endpoints, see [API Query Language](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/api/rest/getting-started/api-query-language),[Sorting and Paging](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/api/rest/getting-started/pagination),and [Field Projection](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/api/rest/getting-started/field-projection).

import { createClient, OAuthStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards } ,
  auth: OAuthStrategy({ clientId: 'MY-CLIENT-ID' })
});

async function queryRewards(query) {
  const response = await wixClient.rewards.queryRewards(query);
}

queryRewards() with visitor/member access

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function queryRewards(query) {
  const response = await wixClient.rewards.queryRewards(query);
}

queryRewards() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: dashboard.auth(),
  host: dashboard.host()
});

async function queryRewards(query) {
  const response = await wixClient.rewards.queryRewards(query);
}

queryRewards() with Dashboard app access

queryRewards

QueryRewardsResponse

UpdateReward

Updates a loyalty reward.

Use this endpoint to update details of a reward, such as the name, whether or not a reward is active,
or the amount of points it costs to redeem. Also use this endpoint to add new tiers that are eligible to redeem a reward.

You may not change the `type` of a reward. That is set upon creation and cannot be updated.

import { createClient, ApiKeyStrategy } from '@wix/sdk';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: ApiKeyStrategy({
    siteId: 'MY-SITE-ID',
    apiKey: 'MY-API-KEY'
  })
});

async function updateReward(id, reward) {
  const response = await wixClient.rewards.updateReward(id, reward);
}

updateReward() with API Key access

import { createClient } from '@wix/sdk';
import { dashboard } from '@wix/dashboard';
import { rewards } from '@wix/loyalty';

const wixClient = createClient({
  modules: { rewards },
  auth: dashboard.auth(),
  host: dashboard.host()
});

async function updateReward(id, reward) {
  const response = await wixClient.rewards.updateReward(id, reward);
}

updateReward() with Dashboard app access

updateReward

UpdateRewardResponse

To use the Rewards API, install the `@wix/loyalty` package using npm or Yarn:
  ```console
npm install @wix/loyalty
```

or

```console
yarn add @wix/loyalty
```

Then import `{ rewards }` from `@wix/loyalty`:

```js
import { rewards } from '@wix/loyalty'
```
  

loyalty_rewards

ApplicationError

code

data

description

BulkActionMetadata

Number of items that couldn't be processed.

totalFailures

number

Number of items that were successfully processed.

totalSuccesses

Number of failures without details because detailed failure threshold was exceeded.

undetailedFailures

Total successes and failures of the bulk create rewards action.

bulkActionMetadata

results

BulkRewardResult

item

itemMetadata

ItemMetadata

CouponReward

fixedAmount

freeShipping

percentage

Limit the coupon to carts with a subtotal greater than this number.

minimumSubtotal

Specifies the type of line items this coupon will apply to.

For more information, see the Coupons API.

scope

Whether the coupon applies to subscription products.

If set to `true`, the discount will apply to all billing cycles.

appliesToSubscriptions

boolean

discountedCycleCount

Whether the coupon is limited to one item.

limitedToOneItem

CouponScope

Coupon scope's applied group.

See the Coupons API for valid groups.

group

Group

Scope namespace.

See the Coupons API for valid namespaces.

namespace

CursorPaging

Pointer to the next or previous page in the list of results.

Pass the relevant cursor token from the `pagingMetadata` object in the previous call's response.
Not relevant for the first request.

cursor

Maximum number of items to return in the results.

limit

CursorPagingMetadata

Number of items returned in the response.

count

Cursor strings that point to the next page, previous page, or both.

cursors

Cursors

Whether there are more pages to retrieve following the current page.

+ `true`: Another page of results can be retrieved.
+ `false`: This is the last page.

hasNext

Cursor token pointing to a page of results. Not used in the first request. Following requests use the cursor token and not `filter` or `sort`.

cursorPaging

Filter object in the following format:
`"filter" : {
"fieldName1": "value1",
"fieldName2":{"$operator":"value2"}
}`
Example of operators: `$eq`, `$ne`, `$lt`, `$lte`, `$gt`, `$gte`, `$in`, `$hasSome`, `$hasAll`, `$startsWith`, `$contains`

filter

Sort object in the following format:
`[{"fieldName":"sortField1","order":"ASC"},{"fieldName":"sortField2","order":"DESC"}]`

sort

Cursor string pointing to the next page in the list of results.

DiscountAmount

configsByTier

DiscountAmountConfig

Discount amount. Must be a positive value.

amount

Amount of points required to redeem the reward.

costInPoints

Tier ID, or empty if config applies to the base tier.

tierId

EventMetadata

Unique event ID.
Allows clients to ignore duplicate webhooks.

A sequence number defining the order of updates to the underlying entity.
For example, given that some entity was updated at 16:00 and than again at 16:01,
it is guaranteed that the sequence number of the second update is strictly higher than the first.
As the consumer, you can use this value to ensure that you handle messages in the correct order.
To do so, you will need to persist this number on your end, and compare the sequence number from the
message against the one you have stored. Given that the stored number is higher, you should ignore the message.

entityEventSequence

Assumes actions are also always typed to an entity_type
Example: wix.stores.catalog.product, wix.bookings.session, wix.payments.transaction

entityFqdn

ID of the entity associated with the event.

entityId

eventTime

eventType

The identification type and identity data.

identity

IdentificationData

instanceId

If present, indicates the action that triggered the event.

originatedFrom

This is top level to ease client code dispatching of messages (switch on entity_fqdn+slug)
This is although the created/updated/deleted notion is duplication of the oneof types
Example: created/updated/deleted/started/completed/email_opened

slug

Whether the event was triggered as a result of a privacy regulation application
(for example, GDPR).

bulkCreateRewards( )