Skip to main content

UIKit components for Polls

Using RealtimeKit'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

RealtimeKit 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 RealtimeKit Poll Form which allows you to create a poll. Check out the implementation based on the framework you are using:

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

RealtimeKit Polls : View existing polls​

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

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

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

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

RealtimeKit Poll: View poll​

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

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

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

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

        el.poll = {
          id: 'poll-id',
          question: 'Have you started using RealtimeKit 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>

RealtimeKit Polls Toggle​

Using the RealtimeKit 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.

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