Skip to main content

UIKit components for Polls

Using Dyte's UIKit you can simplify the process of adding polls in your meetings!

Prerequisites​

  1. Install Core SDK for your framework
  2. Install UIKit for your framework

Dyte Poll Form : Create a new poll​

If a user has the right set of permissions, the first thing they woulds want to do is create a poll for the meeting. The easiest way to get started is to grab the Dyte Poll Form which allows you to create a poll. Check out the implementation based on the framework you are using:

  <dyte-poll-form id="dyte-el"></dyte-poll-form>
    <script>
      document.getElementById('dyte-el').addEventListener('dyteCreatePoll', (e) => {
      console.log('create poll', e.detail)
      });
    </script>

Dyte Polls : View existing polls​

After a user is done creating a poll, they can see all the polls available in a meeting using Dyte Polls and enable/disable the polls.

      <dyte-polls id="dyte-el"></dyte-polls>

      <script>
        document.getElementById('dyte-el').meeting = meeting;
      </script>

      <style>
        dyte-polls {
          height: 480px;
          width: 100%;
          max-width: 320px;
          background-color: '#000';
        }
      </style>

Dyte Poll: View poll​

The Dyte Poll component lets the users view a given poll. It requires a poll object to render the poll.

      <dyte-poll id="dyte-el"></dyte-poll>

      <script>
        const el = document.getElementById('dyte-el');

        el.addEventListener('dyteVotePoll', (e) => {
          console.log('Voted', e.detail);
        });

        el.poll = {
          id: 'poll-id',
          question: 'Have you started using dyte yet?',
          options: [
            {
              text: 'Yes',
              votes: [{ id: 'vaibhavs-user-id', name: 'Vaibhav' }],
              count: 0,
            },
            {
              text: 'Nope',
              votes: [],
              count: 0,
            },
          ],
          anonymous: false,
          hideVotes: false,
          createdBy: 'Vaibhav',
          createdByUserId: 'vaibhavs-user-id',
          voted: [],
        };
      </script>

Dyte Polls Toggle​

Using the Dyte Polls Toggle, one can easily change the visibility of a poll on the screen. It requires the user's meeting object to see the unread polls count badge on the component.

        <dyte-polls-toggle variant="horizontal" class="dyte-el"></dyte-polls-toggle>
        <script>
          const elements = document.getElementsByClassName('dyte-el');
          for (const el of elements) {
            el.meeting = meeting;
          }
        </script>