Add Jeopardy to Your Website

Want a Jeopardy on your website or blog? With Jippis, you can create a Jeopardy game and display it on your site. Whether you're a teacher sharing quizzes on your classroom site, a content creator adding interactive elements to your blog, or a designer showcasing your work, adding Jippis to your website takes just minutes!

What You Need

  • A Jeopardy game created on Jippis
  • Basic understanding of HTML (helpful but not required)

Step-by-Step Instructions

  1. Create Your Game: Navigate to the game creator and build your quiz.
  2. Open Your Game: Go to your library and find the game you want to display on your page.
  3. Get the Share Link: Click the three-dot menu (More actions) next to your game, then click "Share".
  4. Switch to Embed Tab: In the share modal, click the embed icon to switch to the embed tab.
  5. Copy the Code: Click "Copy embed" to copy the iframe code to your clipboard.
  6. Add to Your Site: Paste the code into your website's HTML where you want the quiz to appear.

Understanding the Embed Code

When you copy the embed code, you'll get an HTML iframe snippet that looks like this:

<iframe
  src="https://www.jippis.com/embed/[shareId]"
  loading="lazy"
  style="width: 100%; max-width: 960px; border: 0; border-radius: 24px;"
  height="600"
></iframe>

Here's what each part does:

  • src: Points to your game's embed URL (unique to your game)
  • loading="lazy": Improves page performance by loading the embed only when needed
  • style: Controls the embed's appearance (width, max-width, border, border-radius)
  • height="600": Sets the embed height to 600 pixels

Customization Options

You can customize the embed's appearance by modifying the code. Here are some common customizations:

Adjust Width

Change the max-width value in the style attribute:

style="width: 100%; max-width: 720px; border: 0; border-radius: 24px;"

Change Height

Adjust the height attribute (recommended: 500-700px):

height="550"

Modify Border Radius

Change the border-radius value for sharper or rounder corners:

style="width: 100%; max-width: 960px; border: 0; border-radius: 12px;"

Add a Border

Add a border to make the embed stand out:

style="width: 100%; max-width: 960px; border: 1px solid #ccc; border-radius: 24px;"

Common Questions

Can players interact with the embedded game?
Yes, the players may interact and play the game on your page.
Will the embed update if I change my game?
Yes! Changes you make to your game will automatically reflect in the embed.
Is the embed responsive?
Yes, the embed width is set to 100% with a max-width of 960px by default, so it adapts to different screen sizes.
Can I embed on any platform?
Most platforms that allow HTML iframes will work, including WordPress, Wix, Squarespace, and custom websites. Some platforms may have restrictions on iframe usage.

Where to Use Embeds

Here are some great places to showcase your Jeopardy games:

  • Educational websites and course platforms
  • Blog posts and articles
  • Portfolio sites showcasing quiz design
  • School or classroom websites
  • Event promotion pages

Ready to Get Started?

Now that you know how to embed Jeopardy games, it's time to create your own! Make your own Jeopardy game in the creator, or browse public quizzes for inspiration. Need help playing? Check out our How to Play Jeopardy guide.