Client Side SDK

Sharing Stage

Encourage your users to share your campaign with their friends and followers on social media.

The Sharing Stage typically includes a Viral Loops widget that allows users to share your campaign with others via email, social media, or other channels.

You can also customise the appearance of your widget to match your brand's visual style.

Here's how it would look using the Sharing Stage of a Viral Loops form widget as your custom form's integration sharing stage:

<div data-vl-campaign-id="your-campaign-id" data-vl-container="sharing-stage">
  <form-widget ucid="your-campaign-id"></form-widget>
</div>

The complete HTML will look like this:

<!--- This will be visible before someone participates --->
<div data-vl-campaign-id="your-campaign-id" data-vl-container="join-stage">
 <h2> Join the campaign! </h2>
 <p> Win exlusive rewards </p>
 <form data-vl-action="join-stage#join">
   <input
     data-vl-join-stage-target="input.email"
     type="email"
     placeholder="Enter your email"
   />
   <input
     data-vl-join-stage-target="input.firstname"
     type="text"
     placeholder="Enter your firstname"
   />
   <input
     data-vl-join-stage-target="input.lastname"
     type="text"
     placeholder="Enter your firstname"
   />
   <input type="submit" />
 </form>
</div>

<!--- This will be visible after someone has participated --->
<div data-vl-campaign-id="your-campaign-id" data-vl-container="sharing-stage">
  <form-widget ucid="your-campaign-id"></form-widget>
</div>

This first section creates the Join Stage of the Viral Loops campaign. It includes a custom form that visitors can use to join the campaign. Here's what each attribute does:

  • data-vl-campaign-id="your-campaign-id": the campaign that your form belongs to. You should replace "your-campaign-id"` with the actual ID of your campaign in Viral Loops.
  • data-vl-container="join-stage": Specifies that this is the Join Stage of your campaign.
  • data-vl-action="join-stage#join": Specifies that users are joining the campaign.
  • data-vl-join-stage-target: These attributes identify the input fields on your form that correspond to specific user information, such as their email address, first name, and last name.

This second section creates the Sharing Stage of the Viral Loops campaign. It includes the Viral Loops widget that visitors will see after they've joined the campaign. Here's what each attribute does:

  • data-vl-campaign-id="your-campaign-id": This attribute identifies the campaign that your form belongs to. You should replace "your-campaign-id"` with the actual ID of your campaign in Viral Loops.
  • data-vl-container="sharing-stage": This attribute specifies that this is the Sharing Stage of your campaign.
  • <form-widget ucid="your-campaign-id"></form-widget>: This is the Viral Loops widget that allows users to share your campaign with others via email, social media, or other channels. The ucid attribute specifies the campaign ID that the widget is associated with.