How to make an Image Interactive using Interactivity Studio

Making images interactive in Interactivity Studio is a quick and easy process.

Step 1: Upload an Image

Upload an image in the space provided.

Step 2: Image Check

Check if you have uploaded the right image. If you have, click next. If not, this is the stage where you can upload a new image.

Step 3: Create your first Interactive Item

To create your first interactive item, pick a color for your tooltip from the colors provided on the right-hand side of the screen

Note: make sure to pick a color that has good contrast with the background so the process of outlining an interactive segment becomes more precise.

Next, start clicking on the areas of the image to create an outline.

Once done, click Next.

Now, you will see an option to cut out parts of the image. We have covered this feature in a tutorial linked here. But for now, let's click 'Create'.

Step 4: Attach Content to the Interactive Item

The true power of interactive images lies in the ability to attach content to them. Click on the 'Add Content' button to do so.

In Interactivity Studio, one has three options that one can follow:

1. Text only: Write up a description of the interactive item that was made. The text-only block is excellent for a minimalist approach to adding more context to your interactive item.

2. Image and Text: Upload and support another image with text. Great for featuring product previews or simply giving your audience a different perspective of the interactive item.

3. Video and Text: Interactivity Studio supports including videos hosted on YouTube or Vimeo. This content block allows you to attach videos to interactive items and optionally add supporting text. If you would like to add a product review or add a video's dimension to spice things up, here is your cue!

You can decide which one suits your needs better and pick one accordingly.

Step 5: Optional- Add a Button

Did you know that you can add a call to action button to interactive items? You might wonder how we added the 'Buy Now' button in the example above. Here is how it is done:

1. Click on 'Add CTA'

2. Add the text you would like the button to say

3. Add the link where you would like your visitors to go to.

Here is a quick video demonstrating this:

Step 6: See it in action - the Preview

You just created your first interactive item! Woohoo! Wasn't that easy?

Now, you can click on the 'preview' button to see it in action.

Step 7: Embed or Share the Interactive Image

Almost there! Now, you can embed the interactive image you just created on your own website (feature coming soon).

You can also share the image in the community. There are a lot of benefits to doing so, which are covered in this tutorial.