The Campaign List Element shows a list of incentive campaign from Spaaza, personalised to the authenticated user. Each campaign is displayed in a simple list item format with a title, description and supplementary data dpeending on the campaign type.
Campaigns are created and managed in Spaaza Console and the content that will be dipslayed in a list view can also be managed here.
The Element’s properties allow a developer to filter which campaigns they want to display to a user, or which they do not. For example:
- a list of campaigns that are only for earning or spending points
- a list of campaigns that only apply to webshop sales
If you do not want to show campaign promotions in list view the Campaign Promotions Element, which displays campaign promotions in card style, may be a better solution.
To include a list of Campaigns on a webpage do the following:
- Add the following script tags at the top of the page
<script type="module" src="https://elements.spaaza.com/elem/spaaza-environment.js"></script> <script type="module" src="https://elements.spaaza.com/elem/spaaza-campaign-list.js"></script>
- Add the Environment tag to the contents of the page (below the script tags). Include the Campaign List within the Environment tag
<spaaza-environment config="your_config_goes_here"> <h3>Webshop-only benefits for members</h3> <spaaza-campaign-list includetags="webshop"></spaaza-campaign-promotions> <!-- other Spaaza Elements and HTML goes here --> </spaaza-environment>
The following optional properties can be passed:
|recipient (optional)||The id of a recipient wallet. Include this if you want to only show campaigns that will add or subtract value for the specified wallet.|
|excludetypes (optional)||A comma separated list (no spaces) of Spaaza campaign types. If set, campaigns of that type will not be returned.|
|includetypes (optional)||A comma separated list (no spaces) of Spaaza campaign types. If set, only campaigns of that type will be returned.|
|includetags (optional)||Campaigns can have one or more tags. If included, campaigns with one or more matching tags will be show. A list of tags can be used in which case the tag names should be separated by commas (with no spaces), for example “autumn-promos,webshop”.|
|excludetags (optional)||Campaigns can have one or more tags. If included, campaigns with the specified tags will be excluded. A list of tags can be used in which case the tag names should be separated by commas (with no spaces), for example “influencer,employee”.|
|color (optional)||The colour of the rendered text in hexadecimal format, for example #FAFAFA. The default color is black if no value is set.|