Skip to main content

Add a Quiz Announcement Bar to Showit

This article describes how to embed an Interact quiz announcement bar onto your Showit site

Written by Damaris Pacheco

This guide walks you through adding an Interact quiz announcement bar to your Showit site.

You’ll be able to:

  • Add an Interact announcement bar to your Showit site

  • Customize how and when the announcement bar appears

  • Confirm the announcement bar and quiz load correctly on your live site

Before you start

Make sure you have the following:

  • An active Interact account

  • At least one created quiz in Interact

  • Your quiz is published in Interact

  • Access to edit your Showit site

  • Access to publish changes in Showit

💡 Note: If you don’t see the announcement bar immediately after adding the code, Save your changes, then check your live/preview site.

Step 1. Get your Interact Announcement Bar Code

  1. Log in to Interact.

  2. Locate the quiz you want to promote.

  3. Click the Share & Embed tab.

  4. Click Announcement bar on the left sidebar.

  5. Click the Javascript tab.

  6. Toggle on Promote in the announcement bar (you can have 1 quiz announcement bar running at a time).

  7. Customize your announcement bar settings as needed.

    • We recommend a Timer Delay of 5–10 seconds.

    • We suggest a Hiatus of at least 10 days.

  8. (Optional) Set announcement rules if you only want the announcement bar to appear on certain pages (or not appear on certain pages).

  9. Click Copy Code.

❗ Important: Always copy the code from the quiz’s Share & Embed area (not from the browser address bar URL).

Step 2. Add the code to Showit

You’ll paste your Interact announcement bar code into Showit so it can load on your site.

Embed on a Showit page using Custom Head HTML

  1. Log in to Showit.

  2. Open the site you want to add the announcement bar to.

  3. Choose the design/page you want to add the announcement bar to.

  4. Click on the area of the page where you want to add the code.

  5. Click Advanced settings (bottom right).

  6. Under Advanced settings, click Custom Head HTML.

  7. Paste your Interact announcement bar code into the pop-up window.

  8. Click Save.

💡 Note: The announcement bar may not appear inside the editor while you’re working; check your saved/live version.

Step 3. View the announcement bar on your live page

  1. In Showit, click Save if you haven’t already.

  2. Preview your site on mobile and desktop to confirm the announcement bar appears and the button opens your quiz.

💡 Tip: If you don’t see the announcement bar while editing, this is expected in many cases—check the saved/preview version instead.

Step 4. Test the Embed

Confirm the announcement bar and quiz work end-to-end on your Showit site.

  1. Load the page where your announcement bar should appear.

  2. Wait for the delay (if you set a Timer Delay).

  3. Click the announcement bar button to open the quiz.

  4. Take the quiz as a visitor would.

  5. If your quiz includes an opt-in form, submit the form to confirm it appears and can be completed.

⚠️ Warning: If you’re testing an opt-in form, use a real email you can access so you can verify follow-up emails (if you have them enabled).

Step 5. Publish your Showit changes

Your announcement bar won’t be visible to visitors until your Showit changes are published.

  1. In Showit, click Publish.

  2. Visit your live domain and confirm the announcement bar appears.

❗ Important: If you paste the code but don’t Save and Publish, the announcement bar won’t appear for visitors.

FAQs

Why can’t I see the announcement bar in the Showit editor?

  • Some embeds may not render while you’re editing. Save your changes, then check your preview/live site.

Do I need to update the announcement bar code when I edit my quiz?

  • Usually, no. In most cases you can keep the same code, but you must publish your quiz in Interact for changes to appear.

How can I replace what quiz is shown in the announcement bar?

  • If you want a different quiz to appear in the announcement bar, swap the announcement bar code.

    1. In Interact, open the new quiz you want to promote.

    2. Go to Share & Embed → Announcement bar → Javascript and click Copy Code.

    3. In Showit, open the page you added the code to and go to Advanced settings → Custom Head HTML.

    4. Replace the existing code with the new code, then click Save and Publish.

Make a quiz in 2 minutes with AI

Try it free

Related Articles
Did this answer your question?