Embedding Polls on Your Website

Add interactive polls to your website, blog, or web app with just a few lines of code.

Widget Preview Examples

Here's how each poll type looks when embedded on your website:

Standard Poll
What's your favorite color?
View full poll on PollThem
Simple one-click voting
Ranked Choice Poll
Rank your preferences
Available
Option A
Option B
Your Rankings
Drag here
View full poll on PollThem
Drag-and-drop ranking
DateTime Poll
When can you meet?
Mon 10am
Yes Maybe No
Tue 2pm
Yes Maybe No
View full poll on PollThem
Yes/No/Maybe availability

Getting Your Embed Code

  1. Create a poll on PollThem
  2. After creation, click the "Embed" button in the success message, or find it on your poll's Results page
  3. Customize options (theme, display mode)
  4. Copy the generated code
  5. Paste into your website's HTML

Full Poll Widget

The full widget displays your entire poll with all options, allowing visitors to vote directly on your site.

Example Code
<!-- PollThem Embed Widget -->
<div data-pollthem-poll="YOUR_POLL_ID"
     data-pollthem-theme="light"
     data-pollthem-mode="vote">
</div>
<script src="https://pollthem.online/js/pollthem-embed.js" async></script>
Widget Options
Attribute Values Description
data-pollthem-poll Poll ID Required. Your poll's unique identifier
data-pollthem-theme light | dark Color theme (default: light)
data-pollthem-mode vote | results Show voting form or results only
data-pollthem-show-title true | false Show/hide poll title
data-pollthem-show-description true | false Show/hide poll description

Ranked Choice Polls

The embed widget fully supports ranked choice voting with an interactive drag-and-drop interface. Users can drag options to rank them in their preferred order.

Example Code
<!-- Ranked choice polls work automatically -->
<div data-pollthem-poll="YOUR_RANKED_POLL_ID"
     data-pollthem-theme="light">
</div>
<script src="https://pollthem.online/js/pollthem-embed.js" async></script>
How Ranked Choice Embed Works
  • Drag and drop - Users drag options from "Available Options" to "Your Rankings"
  • Reorder rankings - Drag items within the rankings area to change order
  • Mobile support - Touch-friendly drag and drop for phones and tablets
  • Max rank limit - Respects your poll's maximum rankings setting
  • Results display - Shows points and medals for top 3 options
Note: Individual vote buttons (data-pollthem-option) are not available for ranked choice polls since ranking requires the full widget interface.

DateTime/Scheduling Polls

The embed widget fully supports DateTime (Doodle-style) scheduling polls. Users can respond with Yes, No, or Maybe for each time option.

Example Code
<!-- DateTime polls work automatically -->
<div data-pollthem-poll="YOUR_DATETIME_POLL_ID"
     data-pollthem-theme="light">
</div>
<script src="https://pollthem.online/js/pollthem-embed.js" async></script>
How DateTime Embed Works
  • Name required - Users enter their name to submit a response
  • Yes/No/Maybe - Click buttons for each time option to indicate availability
  • Results summary - Shows response counts with best option highlighted
  • Light/dark themes - Matches your site's design
Note: Individual vote buttons are not available for DateTime polls since they require the full interface for Yes/No/Maybe responses.

Individual Vote Buttons

For custom layouts, you can embed individual vote buttons for each option. Perfect for tables, comparison charts, or integrating votes into your own design.

Example: Single Button (Single-Choice Poll)
<button data-pollthem-poll="YOUR_POLL_ID"
        data-pollthem-option="OPTION_ID">
    Vote for Option A
</button>
<script src="https://pollthem.online/js/pollthem-embed.js" async></script>
Example: Table Layout
<table>
    <thead>
        <tr><th>Choice</th><th>Vote</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>Option A</td>
            <td><button data-pollthem-poll="abc123" data-pollthem-option="1">Vote</button></td>
        </tr>
        <tr>
            <td>Option B</td>
            <td><button data-pollthem-poll="abc123" data-pollthem-option="2">Vote</button></td>
        </tr>
    </tbody>
</table>
<script src="https://pollthem.online/js/pollthem-embed.js" async></script>
Button Behavior
Single-Choice Polls
  • Clicking a button immediately submits a vote
  • All buttons for that poll are disabled after voting
  • The clicked button shows "Voted!" then changes to "View Results"
Multi-Select Polls
  • Clicking toggles selection on/off (button turns green when selected)
  • A submit button is auto-generated after the last option
  • Users click submit to finalize their selections

Button Grouping (Advanced)

When you have multiple sets of buttons for the same poll on one page (e.g., in different sections), use the data-pollthem-group attribute to keep them separate.

Example: Two Button Groups on Same Page
<!-- Section 1: First voting area -->
<div class="voting-section-1">
    <button data-pollthem-poll="abc123" data-pollthem-option="1"
            data-pollthem-group="groupA">Option A</button>
    <button data-pollthem-poll="abc123" data-pollthem-option="2"
            data-pollthem-group="groupA">Option B</button>
    <!-- Submit button auto-generates here for groupA -->
</div>

<!-- Section 2: Second voting area (independent selections) -->
<div class="voting-section-2">
    <button data-pollthem-poll="abc123" data-pollthem-option="1"
            data-pollthem-group="groupB">Option A</button>
    <button data-pollthem-poll="abc123" data-pollthem-option="2"
            data-pollthem-group="groupB">Option B</button>
    <!-- Submit button auto-generates here for groupB -->
</div>

<script src="https://pollthem.online/js/pollthem-embed.js" async></script>
When to Use Groups
  • Multiple locations: Same poll options appear in different parts of your page
  • A/B testing: Different button layouts in different sections
  • Tab interfaces: Same options in different tabs that shouldn't share state
Without groups, buttons for the same poll share selection state. Adding data-pollthem-group isolates each group so selections don't affect each other.

Passing User Names

If you already know the user's identity (from your own authentication system), you can pass their name silently with their vote using data-pollthem-name.

Example: Single-Choice with Name
<!-- Name is sent automatically with the vote -->
<button data-pollthem-poll="abc123"
        data-pollthem-option="1"
        data-pollthem-name="John Doe">Vote for Option A</button>

<script src="https://pollthem.online/js/pollthem-embed.js" async></script>
Example: Multi-Select with Name
<!-- For multi-select, add name to the submit button -->
<button data-pollthem-poll="abc123" data-pollthem-option="1">Option A</button>
<button data-pollthem-poll="abc123" data-pollthem-option="2">Option B</button>
<button data-pollthem-poll="abc123" data-pollthem-option="3">Option C</button>

<button data-pollthem-submit="abc123"
        data-pollthem-name="John Doe">Submit My Votes</button>

<script src="https://pollthem.online/js/pollthem-embed.js" async></script>
Note: The data-pollthem-name attribute passes the name silently— the user is NOT prompted to enter their name. Use this only when you already know who they are.

Custom Submit Buttons (Multi-Select)

For multi-select polls, a submit button is auto-generated after the last option button. You can provide your own styled submit button instead using data-pollthem-submit.

Example: Custom Submit Button
<!-- Option buttons -->
<button data-pollthem-poll="abc123" data-pollthem-option="1"
        data-pollthem-group="myGroup">Option A</button>
<button data-pollthem-poll="abc123" data-pollthem-option="2"
        data-pollthem-group="myGroup">Option B</button>
<button data-pollthem-poll="abc123" data-pollthem-option="3"
        data-pollthem-group="myGroup">Option C</button>

<!-- Your custom submit button -->
<button data-pollthem-submit="abc123"
        data-pollthem-group="myGroup"
        data-pollthem-name="Current User"
        class="my-custom-submit-style">
    Submit My Selections
</button>

<script src="https://pollthem.online/js/pollthem-embed.js" async></script>
Submit Button Attributes
Attribute Required Description
data-pollthem-submit Yes Poll ID to submit votes for
data-pollthem-group If using groups Must match the group of your option buttons
data-pollthem-name No User name to send with the vote

Complete Attribute Reference

Attribute Used On Description
data-pollthem-poll Widgets, Buttons Poll ID (required)
data-pollthem-option Buttons Option ID for this button
data-pollthem-theme Widgets, Buttons light or dark
data-pollthem-mode Widgets vote or results
data-pollthem-group Buttons, Submit Group identifier for button isolation
data-pollthem-name Buttons, Submit User name to send with vote
data-pollthem-submit Submit button Poll ID for manual submit button
data-pollthem-show-title Widgets true or false
data-pollthem-show-description Widgets true or false

How Voting Works

  • One vote per browser - We use localStorage to track who has voted
  • Cross-origin support - Embeds work on any website
  • Real-time results - After voting, users see live results
  • No cookies required - We don't set cookies on your visitors' browsers

Tips & Best Practices

Do
  • Include the script only once per page
  • Use descriptive button text
  • Match theme to your site's design
  • Test embeds before publishing
Don't
  • Embed closed polls (they won't accept votes)
  • Use multiple scripts for the same poll
  • Modify the data attributes dynamically

Troubleshooting

Check that your poll ID is correct and the poll hasn't been deleted. Also ensure your site allows external scripts.

Make sure the script tag is included on your page and loads successfully. Check your browser console for errors.

You've already voted on this poll from this browser. To test again, clear your browser's localStorage for your site, or use an incognito window.
Quick Links
Create a Poll My Polls FAQ
Pro Tip

Only include the <script> tag once per page, even if you have multiple poll embeds or buttons.