Skip to main content

Embedding the Poll in your React 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 React 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/react";// 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,  },});

The PollView Component​

For more advanced use cases, you can use the PollView component directly. This component can be used to display the poll after creating it, or for displaying a poll when a user opens it or deep links into it.

When a user creates a poll, you may choose open the poll in a modal over their current screen, or you may want to navigate them to a new page dedicated to the poll.

In the example below, we are creating a new route and screen in our navigation that renders a poll based on the Poll ID or Poll URL that are passed as props to the screen.

import { OpenPollFlow, PollView, Theme } from "@polls-platform/react";interface PollScreenProps {  pollSource: string; // poll url or poll id  flow: OpenPollFlow; // creating poll, or opening existing poll?}const PollScreen: React.FC<PollScreenProps> = ({ pollSource, flow }) => {  return (    <PollView pollSource={pollSource} openPollFlow={flow} 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
  4. Render a poll using the PollView component

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,});// after creating the poll, open it using the utility function and the Poll URLopenPoll({  pollViewProps: {    pollSource: poll.url,    openPollFlow: OpenPollFlow.createPoll,    theme: Theme.light,  },});// OR use the <PollView> component directlypollView = (  <PollView    pollSource={poll.url}    openPollFlow={OpenPollFlow.createPoll}    theme={Theme.light}  />);// FOR VOTING// open an existing poll using the utility function and the Poll IDopenPoll({  pollViewProps: {    pollSource: pollId,    openPollFlow: OpenPollFlow.openPoll,    theme: Theme.light,  },});// OR use the <PollView> component directlypollView = (  <PollView    pollSource={pollId}    openPollFlow={OpenPollFlow.openPoll}    theme={Theme.light}  />);