Examples - HTML Macro for Confluence Cloud

Feel free to copy and paste the HTML into your Confluence Cloud HTML Macro (which you can trial for free) to try out the capabilities. Make sure to deselect the Sanitize parameter for these examples.

1 Jira issue collector 2 Include forms from Wufoo 3 Render CodePen block 4 Redirect browser page 5 Redirect to the URL given in the field 6 Add an image into the HTML macro

1 Jira issue collector 2 Include forms from Wufoo 3 Render CodePen block 4 Redirect browser page 5 Redirect to the URL given in the field 6 Add an image into the HTML macro

You need to deselect the Sanitize checkbox of the macro for most of these examples.

Jira issue collector

Click the button to exercise the Jira issue collector (used to embed a Jira feedback form into your website):

Sample source code used in the Jira issue collector HTML Macro:

<script type="text/javascript" src="https://artemis.atlassian.net/s/401422dda1a927c2b340959d2c5dec66-T/w2fj92/72002/be99fa68111ca9c7c6eda6be8b94fb5d/2.0.13/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&collectorId=4a20a0b8"></script>

Include forms from Wufoo

Here is a live form being served from Wufoo:

Deselect the Sanitize checkbox of the macro.
HTML source is copied from what Wufoo provides when you create a form.

Sample source code used in the Wufoo HTML Macro:

<div id="wufoo-z1qocwz617m1fv6">
Fill out my <a href="https://artemissoftware.wufoo.com/forms/z1qocwz617m1fv6">online form</a>.
</div>
<div id="wuf-adv" style="font-family:inherit;font-size: small;color:#a7a7a7;text-align:center;display:block;">HTML Forms powered by <a href="https://www.wufoo.com">Wufoo</a>.</div>
<script type="text/javascript">var z1qocwz617m1fv6;(function(d, t) {
var s = d.createElement(t), options = {
'userName':'artemissoftware',
'formHash':'z1qocwz617m1fv6',
'autoResize':true,
'height':'663',
'async':true,
'host':'wufoo.com',
'header':'show',
'ssl':true};
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
s.onload = s.onreadystatechange = function() {
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
try { z1qocwz617m1fv6 = new WufooForm();z1qocwz617m1fv6.initialize(options);z1qocwz617m1fv6.display(); } catch (e) {}};
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
})(document, 'script');</script>

Render CodePen block

CodePen is a playground for the front-end web.

The following code block that renders a walking elephant:

Sample source code used in the CodePen HTML Macro:

<p data-height="564" data-theme-id="0" data-slug-hash="gaOGja" data-default-tab="result" data-user="FabioG" class='codepen'>See the Pen <a href='Walking'>Walking'>http://codepen.io/FabioG/pen/gaOGja/'>Walking Mr Elephant. NOW WITH MOVING FEET! CSS only animation</a> by Fabio (<a href='@@FabioGFabioGhttp://codepen.io/FabioG'>@FabioG</a>) on <a href='CodePenCodePenhttp://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Redirect browser page

Source code used in the window redirect HTML Macro:

Redirect to the URL given in the field

Source code used in the window redirects to URL HTML Macro:

Add an image into the HTML macro

Have the image on the page via the attachment, then grab the image link by:

Click the meatballs icon.
Click Attachments.
Right-click the Name and copy the link address.