Skip to main content

Embedding the Poll in your Web App

Hosted vs Embedded Voting​

After the user shares the poll, when others tap the link the default behavior is for the poll to open in our responsive web app which is styled to match your brand with your logo on the top and a URL like yourapp.pollsplatform.com so that users will still feel like they are on your platform.

However, you can also choose to have voters directed to your website when they open the poll, and you can display the poll embedded on your site. This option needs to be configured at your account level, so please contact your Customer Success Manager, and then follow the guide below to configure a Poll Route.

Creating the Poll Route​

If you choose to have voters directed to your website when they open the poll (as mentioned above), then you'll want to to create a new route which represents the poll. You will also need to do this if you want poll creators to be navigated to a dedicated poll page when they create a poll.

The URL pattern for the route should contain the following information which is needed to open the poll:

  • Poll ID
  • Flow (are we creating a poll or opening an existing one)

You can decide exactly how you want your URL pattern to look, one example would be the following:

Example URL Pattern

https://your-domain.com/polls/:pollId?flow={{flow}}

Embedding the Poll​

The openPoll Utility Function​

The Web SDK provides the openPoll function which is the easiest way to embed the poll in your app. This function takes care of all of the functionality of presenting/dismissing the poll, as well as all of the functionality within the poll, such as voting, sharing, etc.

In the example below, after creating a poll we are opening it in the current screen by passing the Poll URL and OpenPollFlow.createPoll because we just created the poll.

Alternatively, when a voter is navigated to your application, you can open the poll using the Poll ID and OpenPollFlow.openPoll

import { OpenPollFlow, Theme, openPoll } from "@polls-platform/web";// The SDK provides this utility function that will open the poll// in a modal on the current screen. Simply pass the following parametersopenPoll({  pollViewProps: {    pollSource: pollUrl, // poll source can be Poll URL or Poll ID    openPollFlow: OpenPollFlow.createPoll,    theme: Theme.light,  },});

Putting it all together​

At this point we have learned how to:

  1. Intialize the SDK
  2. Create a poll by mapping our data into the poll fields
  3. Render a poll using the openPoll utility function

Let's see it all together below

// initialize the SDK on app launchinitializePolls({  apiKey: "YOUR API KEY",  domainConfig: {    type: DomainConfigType.subdomain,    subdomain: "YOUR SUBDOMAIN",  },  environment: Environment.production,});// creating a poll is synchronous and instantaneousconst poll: PollResponse = createPoll({  title,  ownerId,  settings,  options,});// open the poll after creating it using the Poll URLopenPoll({  pollViewProps: {    pollSource: poll.url, // poll source can be Poll URL or Poll ID    openPollFlow: OpenPollFlow.createPoll,    theme: Theme.light,  },});// open an existing poll using the Poll IDopenPoll({  pollViewProps: {    pollSource: pollId, // poll source can be Poll URL or Poll ID    openPollFlow: OpenPollFlow.openPoll,    theme: Theme.light,  },});