This article will go through the different option that you can build with the code block.
Building side-by-side 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-binary-poll
id="pizza-binary-poll"
endpoint="https://stories.tappable.link/interactive/poll"
prompt-text="What's your favorite food?"
option-1-text="🍕"
option-2-text="🍔"
theme="light"
class="text-sm"
style="
--interactive-accent-color: #fb923c;
--interactive-prompt-text-color: #ffffff;
"
>
</amp-story-interactive-binary-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 2 lines for the variations. I will change the the background to yellow (#ffd700), put a black text (#000000). The code will become as follows
--interactive-prompt-background: #ffd700;
--interactive-prompt-text-color: #000000;
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-binary-poll
id="pizza-binary-poll"
endpoint="https://stories.tappable.link/interactive/poll"
option-1-text="🍕"
option-2-text="🍔"
theme="dark"
class="text-base"
>
</amp-story-interactive-binary-poll>
</div>
Changing the accent color of the side-by-side poll
You can select the colour of your side by side pole. This can only be done with a theme="light"
This is the current version with color #FB923C:
Change the color with the following code to get a purple (#BF8AFF) poll.
--interactive-accent-color: #BF8AFF
This become the result:
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.