This article will go through the different option that you can build with the code block.

Building classic polls with the code block

Copy the necessary code if you want to create a classical poll with a header like the example below.

This is the necessary code for this poll. Feel free to change the questions and the poll answers.

<div class="w-full h-full flex justify-center">
<amp-story-interactive-poll
    id="poll-dark-transparent-red"
    theme="light"
    endpoint="https://stories.tappable.link/interactive/poll"
    prompt-text="Pick a season"
    option-1-text="Spring"
    option-2-text="Summer"
    option-3-text="Fall"
    option-4-text="Winter"
    class="text-sm"
    style="
        --interactive-prompt-background: #f44336;
        --interactive-prompt-text-color: #ffffff;
        --interactive-prompt-alignment: center
    "
>
</amp-story-interactive-poll>
</div>

Setting up the code block

When creating a poll with the code block, you should really pay attention to one single thing. And that's the id= ! The id should be unique for each of the polls that you create. Try to name the id in a descriptive way to avoid having duplicates.

⚠️ A duplicate id will give you false poll results.

Some design options are offered to you.

These are a few changes that you can do in the code above.

Change the theme

Change the theme by changing it to dark.

theme="dark"

Change the size of the prompt text

You can change the size of the prompt text right here.

class="text-sm"

You can play around with the size of the text to suit your desired design. Here is the list of the different sizes.

"text-xs"
"text-sm"
"text-base"
"text-lg"
"text-xl"

Change the prompt colors and alignment

Play around with these 3 lines for the variations. I will change the the background to yellow (#ffd700), put a black text (#000000) and left align the text. The code will become as follows

        --interactive-prompt-background: #ffd700;
        --interactive-prompt-text-color: #000000;
        --interactive-prompt-alignment: left

Remove the question from the poll

If you want you can simply remove the question from the polls. This allows you to be more creative with your question design. Play around with different fonts with the text block.

Simply remove some code to get back to the bare bones of your poll! Just like the code below.

<div class="w-full h-full flex justify-center">
<amp-story-interactive-poll
    id="poll-dark-transparent-red"
    theme="dark"
    endpoint="https://stories.tappable.link/interactive/poll"
    option-1-text="Spring"
    option-2-text="Summer"
    option-3-text="Fall"
    option-4-text="Winter"
    class="text-sm"
>
</amp-story-interactive-poll>
</div>

Tappable Liability

⚠️ Tappable doesn't ensure anymore the validity of your AMP Story once you inject custom code. So don't forget to double check you Story once you've completed it.

Check AMP Validity