Skip to main content

HTML Widget

Ryan Belcher
  • Updated

Insert your own custom HTML directly into a Creator Studio Experience, unleashing a world of possibilities.  With the HTML Widget, you can now add custom elements to your Experiences using the embed code that is provided by other third party tools or software.

This Widget can also be used to embed one Experience inside of another! The bottom of this article details how you can do that.

Find the HTML Widget in your list of widgets along the right side of the Creator Studio Editor. 

mceclip0.png

Once added, enter in your custom HTML.  Be sure that you’ve edited this properly, as Creator Studio has no way to validate that the HTML is correct.

*NOTE: The Zmags Support team cannot assist with troubleshooting the code that you put into the HTML Widget. If it does not work properly, we would suggest contacting the provider/generator of the code for more assistance. Our team is not able to support code/HTML that is generated from outside of the Zmags platforms.

mceclip3.png

Customize the dimensions to fit the content properly.  If this is not done, you’ll see scroll bars to the right and bottom of the content space.

Preview the content by clicking preview.  You’ll notice your content show up if it’s available.  If this is a campaign-based HTML snippet, you may have to take a few additional steps to get this to render.

mceclip2.png

Some examples of content that can be added to Experiences via the HTML Widget are:

  • Forms
  • Surveys
  • Polls
  • Data capture items
  • Email registration/capture fields
  • Countdown clocks/timers
  • Other Creator Studio content/Experiences

Embedding an Experience inside of another Experience

If you would like to embed one Experience inside of another Experience (i.e. embedding a carousel Experience into part of a larger landing page Experience) then please follow the steps below:

  1. Edit the Experience that you would like to embed into another one
  2. Hit the "Push Group" button (or "Push" if "Push Group" is not available)
  3. Click on "Copy Code" in the top right, as if you were going to Publish your Experience
  4. Leave the Experience you are inside of, and go to edit the Experience where you would like to embed the one you just copied the code for
  5. Place an HTML Widget into the Experience
  6. Paste the code you copied from Step 3 into the right hand panel that is highlighted in the above screenshot

In some cases, you may need to add <body> tags around the Experience Code that you paste into your HTML Widget in Step 6. If that is needed, then instead of the HTML Widget just containing the Experience Code, it would contain something like this:

<body>
PASTE EXPERIENCE CODE HERE
</body>

As a best practice, we suggest setting the size of the HTML Widget to be the same exact size of the Experience that you are embedding here. For example, if the embedded Experience is 700x500 in sizing, then you will want to size the HTML Widget at 700x500 as well.

Have more questions? Submit a request

Related articles

Comments

0 comments

Please sign in to leave a comment.