Tug of War Design Guidelines

Description

Encourage fans to rally for their favourite opponent in a two-sided voting battle. Collect fan information, increase shares and News Feed visibility by pitting fans against each other in a friendly competition. Real-time results pressure fans to rally their friends, helping your campaign reach farther.

Styling Tips

We highly recommend using transparent backgrounds in the following images for a more professional look:
Header
Thank You
Contest Over
Region & Age Restriction
Success/Failure

Campaign Specific Assets

Voting Option Images

Location Images displayed side-by-side to choose from Width 405px exactly Height 600px exactly File Types JPG, PNG, WEBP

Voting Option Images 405 × 600 (Recommended)

Standard Assets

Background Image/Video

Location The background of the page Width 1920px Height 1080px File Types JPG, PNG, WEBP

Background Image/Video 1920 × 1080 (Recommended)

Header Image

Location At the top of the page, it's the first thing users will see. It's a great place to include Sponsor Branding. Width 1080px Height 1000px (Mobile Optimized) File Types JPG, PNG, WEBP

Header Image 1080 × 1000 (Recommended)

Share Image

Location This image is shared alongside the campaign's meta description when a user shares the campaign to their network. Width 1200px Height 628px File Types JPG, PNG, WEBP

Share Image 1200 × 628 (Recommended)

Thank You Image

Location Display right after an entry is submitted. This is a great place to include a CTA from your Sponsor or for your own promotions. Width 1080px Height 1000px (Mobile Optimized) File Types JPG, PNG, WEBP

Thank You Image 1080 × 1000 (Recommended)

Contest Over Image

Location Displayed to users who visit the campaign after the end date. Include a call to action for what your fans should do next. Width 1080px Height 1000px File Types JPG, PNG, WEBP

Contest Over Image 1080 × 1000 (Recommended)

Optional Assets

Region Restriction Image

Location Displayed to users that enter the campaign from a restricted region Width 1080px Height 1000px File Types JPG, PNG, WEBP

Region Restriction Image 1080 × 1000 (Recommended)

Age Limit Image

Location Displayed as part of an age gate control Width 1080px Height 1000px File Types JPG, PNG, WEBP

Age Limit Image 1080 × 1000 (Recommended)

Age Limit Failed Image

Location Displayed to users who fail the age gate requirement Width 1080px Height 1000px File Types JPG, PNG, WEBP

Age Limit Failed Image 1080 × 1000 (Recommended)

Scheduler Event Image

Location The background image for a campaign event on your Engagement Scheduler Page. It is placed behind a dark gradient overlay. Width 1080px Height 1000px File Types JPG, PNG, WEBP

Scheduler Event Image 1080 × 400 (Recommended)

Campaigns fire custom javascript events at certain points during fan interaction. Use jQuery to listen in on these events.

// Trigger an alert when the entry form loads
$(document).on('tbits.formLoad', function () {
    alert('Form has loaded');
});

Campaign Events

Trigger Type	Trigger Scenario	Example Data Output
tbits.load	When the campaign has finished loading	No additional data
tbits.selectOption	Fan has selected an option	No additional data

Default Events

Trigger Type	Trigger Scenario	Example Data Output
tbits.formLoad	The entry form has loaded	No additional data
tbits.submit	The fan has submitted their entry form	No additional data
tbits.submitSuccess	The ajax call to submit the form has succeeded	No additional data
tbits.countdownDone	Campaign time countdown has completed	No additional data
tbits.pingServer	Fires when campaign page loads	No additional data
tbits.tinfoilDisplay	The "cookies are required" message has been displayed to the fan because they have disabled cookies	No additional data
tbits.tinfoilClick	Fan has clicked Continue in the "cookies are required" message	No additional data
tbits.populateFieldValues	Entry form has been populated with fan values	No additional data

Auth Events