Popular articles : Google Chrome Autoplay PolicyCreating a Mechanic

Creating a Poll using a Versus Widget

Invite your audience to vote through social networks for their favorite character, event or product and display results in real-time.

Polls allow you to ask one multiple-choice question. Your audience can choose from options that you pre-define, allowing the voter to select only one.

Creating your Poll

Get started 

Create the Flows to define the social content (#hashtag and/or @handle) you want to collect and measure. You should create one Flow for each option. 

  • For Twitter polls, use the Twitter Public Stream Filter.
  • For Facebook polls, use the Facebook Comments Filter.
  • For Instagram polls, use the Instagram Comments Filter.


Create a Page

  • Go to the Visualizations module and click on + Add visualization, and select Web Pages.
  • From the Pages Editor's sidebar, select the container element, drag it, and drop it into the Page. Do the same with the versus Widget and drop it into the container element. 


Versus Widget Settings

Select the Widget by clicking on it and you will see 2 tabs on the sidebar: Content and Settings. 

In the Content tab:

  • Use the Pick Flows button to select the Flows you want to add to the Widget in order to start displaying data.
  • Upload a picture for each option.
  • Configure the #hashtag (same used by the flow) and Twitter @handle (Just for Twitter polls). Then click on Apply and do the same for each Flow.

The Settings tab can be used to configure the following settings:

Behavior

Displays the Count in Total Posts or Unique Authors. 

  • Enable Chosen count to display the number of Tweets/Posts collected for each Flow option. In addition, it will allow you to add the chosen count's label.

  • Enable Show percentage to display the percentage of votes that each option has received in relation to the total voting.

Design

  • Highlight the percentage to display it in a bigger size, so that your audience has a clear view of which option is leading the Poll.
  • Enable Show Flow Name to display the name of each option.

Social Interactions

Enable Show vote buttons to allow your audience to participate in the Poll through the Widget. Take into account that users will be asked for permission to submit their votes through our app. You also have the option to edit the label of the voting button. By default, it comes with the label "vote", but you can change it, for example, to "Support".

Use Twitter intent to encourage your audience to participate using the main @[handle] or #[hashtag] you are promoting. Use these variables to configure the Twitter intent: 

  • @[handle], which takes the @account you configured on the content tab.
  • #[hashtag], which takes the #hashtag you configured on the content tab.
  • [name], which takes the Flow's name.
  • ENTER URL, which can be replaced by the URL where your audience can participate from. In addition, we recommend making your users share the URL for better engagement. 

Twitter Intent Example

  • @[handle]: "I believe [name] will win tonight #[hashtag]. Click to vote ENTER URL."
  • @account: "I believe [Flow name] will win tonight #myhashtag. Click to vote www.myurl.com."

Instagram Post's URL (Only available if the Instagram stats & content source is enabled)

Enter the post's URL where your audience will be redirected to in order to vote by commenting using a #hashtag or keywords you have configured in the Flow's query.

 

After entering the URL and clicking on Vote, you will see the Instagram vote button that will take you to the post in order to leave a comment to participate. 

 

Facebook Post's URL (Only available if the Facebook stats & content source is enabled)

Enter the post's URL where your audience will be redirected to in order to vote by commenting using a #hashtag or keywords you have configured in the Flow's query.

After entering the URL and clicking on Vote, you will see the Instagram vote button that will take you to the post in order to leave a comment to participate.

Note: If you enter a URL for a Facebook post and an Instagram post, you will see both buttons. Therefore, at the end, your audience can choose to vote on Facebook or Instagram. 

Advanced Styling

Copy the element id in order to apply custom settings to the Widget through the CSS editor.

Use the following lines of code to enlarge the font of the percentage (remember to replace the element id): 

element id .versus.versus-v1 .primary-metric .counter-component {
    font-size:3em;
}

Change the number of the font-size property until you get the desired size.

Use the other configuration options to give your own style to your Page.

Publish

To go live, click on the Publish Settings button located at the top right corner of the Pages Editor, then click on Publish and get the script to embed the Poll into your site.  

To check our live widgets-catalog, please go to http://www.flowics.com/widgets-catalog/


Alternative Layout

By default, Poll options will show inline (one next to the other).



If you want to change this behavior on desktop (to present all the options at once), you can add the following CSS code to the Page:

@media (min-width: 768px) {

  .versus.versus-v1 .cards-container {
  flex-wrap: wrap; /*stacked cards instead of inline*/
  }
  
  .versus.versus-v1 .flow-card {
  flex-basis: 24%; /*card width*/
  margin: .5% !important; /*margin between cards*/
  flex-grow: 0; /*same width for all cards*/
  }
  
  .versus.versus-v1 .slider-btn {
    display: none; /*Hide slider control*/
  }

}




To see how to add custom CSS to your Page, read this article.


Was this article helpful?