Custom API widgets, but with no JS.

How it works

We've prepared the API to work based on HTML attributes.

Copy the form to your webflow or add the HTML attributes to a custom form.

Customize it as you wish.

3 simple steps.

Step_0: Campaign ID

Paste your Viral Loops Campaign ID to connect the form to your campaign.

Step_1: Viral Loops Snippet

Copy the Viral Loops <script> and paste it into the <head> of you page.
<script defer type="text/javascript" src="https://app.viral-loops.com/widgetsV2/core/loader.js"></script>

Step_2: Copy the Webflow sample form and customise it

Default

Example (try me)

Copy this default form element and customise it in your website editor.
Use the form to see the "sharing state". Inside Webflow, both states will be visible so you can customize them.

Join our waitlist

Custom Field

Example (try me)

Copy this form element and customise it in Webflow.
Use the form to see the "sharing state". Inside Webflow, both states will be visible so you can customize them.

Join our waitlist

Visible waitlist

Example (try me)

Copy this form element and customise it in Webflow.
Use the form to see the "sharing state". Inside Webflow, both states will be visible so you can customize them.

Join our waitlist

Read the full documentation on connecting Viral Loops to a custom form

While this feature is still under development, you can find the latest documentation (and instructions) on our dedicated developers page.
View full documentation

> Install the Viral Loops snippet.

Copy the Viral Loops <script> and paste it into the <head> of you page. This script is responsible for registering the partcipants, and flippin the Joining and Sharing states.
<script defer type="text/javascript" src="https://app.viral-loops.com/widgetsV2/core/loader.js"></script>

> Add the custom attributes to your joining state form.

<div
  data-vl-campaign-id="vU6nruxN4gLp1gptzaTwYqIXbJc"
  data-vl-container="join-stage"
  class="vl-loading-area"
>
 <h2>Join the campaign!</h2>
 <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 type="submit" />
 </form>
</div>

Join our waitlist

> Add the custom attributes to your sharing state form.

Add this element on the same block as the Joining state—Viral Loops will automatically hide and reveal it when it is necessary.

<div
 data-vl-campaign-id="vU6nruxN4gLp1gptzaTwYqIXbJc"
 data-vl-container="sharing-stage"
>
  <div class="user-stats">
   <div>
     <span> Your position: </span>
     <h1
       data-vl-sharing-stage-target="user.ranking"
     />
  </div>
 <div>
   <span> Your referral count: </span>
   <h1
    data-vl-sharing-stage target= "user.referralCount"
   />
  </div>
 </div>
 <div class="referral-url">
   <span
     data-vl-sharing-stage-target="user.referralUrl"
   />    
   <button
     data-vl-sharing-stage-target="copyButton"
     data-vl-success-message="Copied!"
     data-vl-action="sharing-stage#copy"
    >
     Copy
   </button>
 </div>  
 
</div>

Use the force of word of mouth to turn your happy customers into brand ambassadors.

Referrals
Prelaunch
NEWSLETTER Growth
Giveaways