tag-switch

Class: TagSwitch

TagSwitch

new TagSwitch(WonderPushSDK, options)

WonderPush Web SDK plugin to present the user with a switch she can use to tag herself, like subscribing to a category of push notifications.

When loaded, the plugin looks for placeholder elements like the following, and fleshes them out to beautiful switches:

<!-- For manipulating tags -->
<div class="wonderpush-tag-switch" data-tag="sports" data-label="#sports"></div>
<!-- For manipulating properties -->
<div class="wonderpush-tag-switch" data-field="string_follow" data-value="sports" data-label="#sports"></div>

Either the data-tag or the data-field together with data-value attributes are mandatory, they define what tag is manipulated, or what value is to be put or removed and into what field, when the switch is flipped.

The data-label attribute is highly recommended to signify to the user the meaning of the switch, otherwise ON/OFF are used. You can also use data-sentence to prepend a text on the switch label.

In addition to being customizable using the plugin options, the switch can easily be customized using data- attributes. Here is an example:

<div class="wonderpush-tag-switch"
  data-field="string_follow"
  data-value="sports"
  data-prepend="<div class=&quot;some-wrapper&quot;>"
  data-append="</div>"
  data-sentence="Receive the latest news by push notifications: "
  data-class="some-stylish-class"
  data-color-off="red"
  data-color-on="green"
  data-off="NO"
  data-on="YES"
  >
    <!-- Any content will be replaced with the switch, if push notifications are supported. -->
    Sorry, push notifications are not supported by your browser.
</div>
Parameters:
Name Type Description
WonderPushSDK external:WonderPushPluginSDK

The WonderPush SDK instance provided automatically on intanciation.
options TagSwitch.Options

The plugin options.

Methods

setupTagSwitch()

Scans the document and initializes any new switches.

This is automatically done once during the SDK initialization.

If developing a SPA or dynamically adding new elements to your page like with React, you should call this function to make new switches active.

WonderPush.ready(function(WonderPushSDK) {
  WonderPushSDK.Plugins.get('tag-switch').setupTagSwitch();
});

Type Definitions

Options

Almost all options given here can be controlled from the placeholder element included in the page.

Type:
  • Object
Properties:
Name Type Argument Default Description
switchElementClass string <optional>
 "wonderpush-tag-switch"

The id of the placeholder element this the SDK will use to flesh out a tag switch.

This option cannot be overridden the placeholder element unlike other options, moreover the element id must match the given value.
classPrefix string <optional>
 "wp-tag-"

The prefix to prepend to all the CSS classes names used. If the default style does not suit you, you can either override some rules, or use a whole new ruleset by changing this prefix.

You can override it from the placeholder element using the data-class-prefix attribute.
includeUnsupported string <optional>
 "true"

By default, tag switches only appear for browsers that support web push notifications, which excludes Safari. Setting this to true will let safari users enjoy tag switches you can use for in-app messaging segmentation.
prepend string <optional>

Optional HTML code to inject before the actual switch element. Escape your double quotes properly, and pay extra attention not to create syntax errors or malformed HTML!

You can override it from the placeholder element using the data-prepend attribute.
append string <optional>

Optional HTML code to inject after the actual switch element. Escape your double quotes properly, and pay extra attention not to create syntax errors or malformed HTML!

You can override it from the placeholder element using the data-append attribute.
sentence string <optional>

HTML snippet to inject in a SPAN tag right before the switch. You likely want to include a final space character for proper display.

You can override it from the placeholder element using the data-sentence attribute.
cssClass string <optional>

CSS class to add to the switch element.

You can override it from the placeholder element using the data-class attribute.
label string <optional>

Label of the switch in both the ON and OFF states. It overrides the on and off options.

You should override it from the placeholder element using the data-label attribute.
on string <optional>
 "ON"

Label of the switch in the ON state.

You can override it from the placeholder element using the data-on attribute.
off string <optional>
 "OFF"

Label of the switch in the OFF state.

You can override it from the placeholder element using the data-off attribute.
colorOn string <optional>

Name of a predefined color to use for the ON state.

You can override it from the placeholder element using the data-color-on attribute.

Available colors:

  • grey or gray - the default.
  • red
colorOff string <optional>

Name of a predefined color to use for the OFF state.

You can override it from the placeholder element using the data-color-off attribute.

Available colors:

  • blue - the default.
  • green