How to Add a Dino Game to Your Website

Displaying the Dino Game on your website is a fun way to engage visitors and encourage them to spend more time exploring your content. Instead of offering only static pages, you can add an interactive game that gives visitors a quick and entertaining break while keeping them on your site.

With the Dino Game widget, it’s easy to embed the classic offline-style dinosaur runner on your website without any coding experience. Jotform lets you customize the game’s appearance, adjust gameplay settings, and seamlessly match the widget to your website’s overall design.

Setting Up Your Dino Game Widget

To embed a Dino Game on your website, you’ll first need to configure the Dino Game widget and copy its embed code. Here’s how to get going:

1. On the top-left side of your Workspace page, click on Create.

2. Then, in the menu that opens up, select Website Widget.

3. Next, in the Search bar in the upper-left corner of Choose Website Widget, enter Dino Game.
4. Now, in the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General tab, set up these things:
   • Heading — Show or hide the game title.
   • Heading Text — Enter the title displayed above the game.
   • Instructions — Show or hide the gameplay instructions.
   • Instructions Text — Enter the gameplay instructions displayed below the game.
   • Show Score — Show or hide the live score during gameplay.
   • Show High Score — Show or hide the highest score achieved on the current browser.
   • Difficulty — Choose the game’s difficulty level.
   • Flying Obstacles — Show or hide flying obstacles during gameplay.
   • Day/Night Mode — Automatically switch between day and night themes as the score increases.
   • Auto Start — Start the game automatically without waiting for player input.

6. Next, under the Style tab, customize these settings:
   • Theme — Choose between the light and dark game themes.
   • Colors — Customize the Background, Ground, Dino, Obstacles, and Text colors.
   • Font Size — Adjust the size of the score and message text.
   • Corner Radius — Choose the corner style for the game area.

7. After that, under the Layout tab, configure these settings:
   • Max Width — Adjust the maximum width of the game area.
   • Height — Adjust the height of the game area.
   • Jotform Branding — Show or hide the Jotform branding.
8. Once you’ve finished configuring the widget, in the pink navigation bar on the top of the page, click on Publish.

9. Then, in the Embed section, click on Copy Code.

10. To view embedding instructions for a supported website builder, click on Platforms in the menu on the left side of the page.
11. Then, in the Platforms section on the right, select the platform you want to view embed instructions for. You can use the Search bar at the top of the section to find it easily.

That’s it! You can now paste the copied embed code into your website or follow the platform-specific instructions to add the widget to your site. The screenshot below shows an example of how the Dino Game Widget will look when embedded:

Updating Your Dino Game Widget

You can update your Dino Game widget at any time after it’s embedded on your website. Here’s a quick how-to:

1. At the top of your Workspace page, click on Filter.
2. Then, in the Dropdown menu that opens, hover your mouse over Website Widgets, and on the right side of it, click on Only.

3. Next, hover your mouse over the Dino Game widget you want to update, then click on Edit Widget on the right side of the page.

4. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General, Style, and Layout tabs, edit the properties to change how your Dino Game widget looks and works on your website.

That’s it! Your changes will be applied to your Dino Game widget automatically.