Claw Machine Tutorial — Answer in Progress

MAKE YOUR OWN CLAW MACHINE WIDGET

Requirements

The only thing you’ll really need for this project is a hosting plan to deploy your widget. I recommend Hostinger who sponsored this project, but Netlify is a free alternative that just requires some knowledge about GitHub.
However, it might be useful to have a photo editor like photoshop to customize your prizes.
If you want to make any changes widget, you’ll need a code editor with an HTML preview plug-in alongside beginner/intermediate coding knowledge in HTML, CSS, and JS.

Step 1: Downloading the project file

Go to my page on Github and download the claw-machine-widget repository. You should find a zip folder containing the base assets you’ll need for this project. You can use GitHub to preview all the files in the project before you download for you piece of mind.

Unzip the project and you should have a folder that looks like this.

Step 2: Adding your prizes

The base project has room for 8 prize options that you need to make yourself. They can be pictures of your pals, doodles, or any image you’d like. When someone plays your claw machine widget, they’ll have the option to download these prize images. This project comes with some default prize images seen below.

To set your own, just replace the ones in the Assets/prize_imgs folder. Remember that the prizes MUST have the following names:

```
prize0.jpeg 
```
```
prize1.jpeg 
```
```
prize2.jpeg 
```
```
prize3.jpeg 
```
```
prize4.jpeg 
```
```
prize5.jpeg 
```
```
prize6.jpeg 
```
```
prize7.jpeg 
```
```
prize8.jpeg 
```

NOTE: If you want to make one of the prizes more rare than the others, be sure to save that as prize0. If you want to save a file in a format besides .jpeg, you’ll need to update the code in the results.html page in the project.

Step 3: Making the prize previews

Now we need to make the previews of the prize that people will see on the claw machine results page — they need to be a uniform size of 700px by 700px to work. This project comes with some default prize preview images seen below.

If you’ve made your own prize images, make sure to update the previews so folks know what they’re getting! You can just resize your prize images to 700px by 700px, or you can use the photoshop template in the folder and paste your prize onto the [PASTE IMAGE HERE] layer.

Make sure your previews have the following names (with the number matching the prize numbers you set in step 2):

```
preview0.png
```
```
preview1.png
```
```
preview2.png
```
```
preview3.png
```
```
preview4.png
```
```
preview5.png
```
```
preview6.png
```
```
preview7.png
```
```
preview8.png
```

(OPTIONAL) Step 4: Customize your claw machine

If you feel comfortable with code, you can open up the project and tweak things like that name on the machine (HTML), the styles (CSS), the odds of winning any particular prize (JS), and even the amount of prizes users can win (JS). I’ve added comments to the HTML, CSS, and JS files in the package which should help you make those changes. Just be sure to test our your game locally if you do make any changes to see if it still works!

Step 5: Deploy your widget

If you don’t want to make any additional changes to the game, you can take the full project folder and upload it to your web hosting service. I recommend using Hostinger where you can get a discount on their already incredibly affordable hosting plans if you use code ANSWERINPROGRESS at checkout (we are sponsored by Hostinger).

After you’ve set up your first website, navigate to the file manager in your hPanel

Then upload the full folder.

Now your website should be available at: [YOUR-CUSTOM-DOMAIN.COM]/claw-machine-widget/game.html
You can share that link with anyone you’d like to play your claw machine game!

For more in-depth instruction on how to set up a website with Hostinger, check out this tutorial.

(OPTIONAL) Step 6: Embed your widget

If you have a different website where you want to embed a claw machine (for example, to display digital downloads from your portfolio), you can! All you need to do is embed an iframe block with a link to widget. You can do that with code, or if you’re using a drag-and-drop website builder, look for a block that says something like “embed code” or “iframe”. There you can paste code that looks something like this:

<iframe src="[INSERT LINK TO YOUR WIDGET HERE]" title="Claw Machine Widget" style="width:100%; height:600px; border:none; align-items:center;"  scrolling="no"></iframe>

Here’s what a modified version of the claw machine widget looks like when embedded into a website made with Hostinger’s drag-and-drop website builder!