Slide: Poll

Engage your audience or class in real time. Involve them to contribute to your presentations with their smartphones and show the results live.

Add a slide "Poll" to your presentation.

Table of contents


Do you like my presentation so far?

It is super


I could'nt care less

Tell me why

Go to and use the code 0

Awaiting first votes

Ain't nothin' but a heartache

Nota bene

This template does not currently save the results of the voting. Each time you will refresh or launch your presentation, the poll start again.

If you would have this requirement, let us now with a new feature request in our GitHub issue tracker.


This template could be added to your presentation using the following methods.

If you are using our Starter Kit, no need to worry about this, this template is included, therefore you could skip the "Installation" chapter.

From a CDN

It's recommended to use unpkg to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src=""></script>

From NPM

To install this template in your project from npm run the following command:

npm install @deckdeckgo/slide-poll

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:


import '@deckdeckgo/slide-poll';


import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-poll/dist/loader'; deckDeckGoSlideElement();


The "Poll" slide's Web Component could be integrated using the tag <deckgo-slide-poll/>.

<deckgo-slide-poll poll-link="" socket-url=""> <h1 slot="question">Do you like my presentation so far?</h1> <p slot="answer-1">It is super</p> <p slot="answer-2">Meh</p> <p slot="answer-3">I could'nt care less</p> <p slot="answer-4">Tell me why</p> <p slot="answer-5">Ain't nothin' but a heartache</p> <p slot="how-to">Go to <a href=""></a> and use the code {0}</p> <p slot="awaiting-votes">Awaiting first votes</p> </deckgo-slide-poll>


The slots question and at least one answer should be provided. Answer slots have to be provided as answer-x where x is a number bigger than 0.

The slot how-to and awaiting-votes are optional, still, it's probably for best of your audience to provide these.

Note also that if you provide a string 0 in the content of your slot how-to, the information will be automatically converted to the real key of your poll (the key your audience could use to reach it and vote).


This component offers the following options which could be set using attributes:

socketUrlstringhttps://api.deckdeckgo.comThe url of the socket (server) where the poll (chat room) is going to be created.
socketPathstring/pollThe path to reach the socket server
connectPollSocketbooleantrueIn case you would not like that the template try to reach the socket server
pollLinkstring url which leads to the voting application respectively where your audience will be available to make their voice heard aka where they will be able to vote.
pollKeystringPer default the template will always try to create a new poll but if you set this value, it will try to retrieve an existing poll


The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--slide-padding-top16pxPadding top of the all slide
--slide-padding-end32pxPadding right of the all slide
--slide-padding-bottom16pxPadding bottom of the all slide
--slide-padding-start32pxPadding left of the all slide
--slide-poll-grid-column-gap32pxThe column gap between the QR code and the chart
--slide-poll-justify-contentcenterThe QR code column content justify position
--slide-poll-align-itemscenterThe QR code column content items alignment
--slide-poll-text-aligncenterThe QR code column text alignment
--slide-poll-backgroundThe background behind the QR code component
--slide-poll-how-to-max-widthcalc(100% - 64px)The maximal width of the "how-to" slot
--slide-poll-how-to-font-size0.8emThe font-size of the text of thee slot "how-to"
--slide-poll-awaiting-votes-z-index1The z-index of the "awaiting-votes" slot
--slide-poll-awaiting-votes-backgroundrgba(255,255,255,0.9)The background of the "awaiting-votes" slot
--slide-poll-awaiting-votes-border-radius8pxThe border-radios of the "awaiting-votes" slot
--slide-poll-awaiting-votes-padding8pxThe padding of the "awaiting-votes" slot

Moreover, this component is using the Web Components "QR Code" and "Bar chart". Their respective CSS4 variables could be applied too.


The slide "Poll" offers some extra methods.


Update not in progress, update the answers and chart of the poll.

const slide = deck.getElementsByTagName('deckgo-slide-poll'); await slide.update();

Is answered

Test if the poll has been at least answered once by a member of your audience.

const slide = deck.getElementsByTagName('deckgo-slide-poll'); await slide.isAnswered(); // resolve a boolean