Use case

Copy and paste the HTML into your Confluence Cloud HTML Macro (which you can trial for free) to test the capabilities. For these examples, make sure to deselect the Sanitize parameter.

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 to 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 to the HTML macro

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

Jira issue collector

You can create a 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

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 frontend web.

The following code block 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:

<button type="button" onclick="myFunction()">Redirect to Google</button>

<script>
function myFunction() {
     window.top.location.href = "http://www.google.com";

}
</script>

Redirect to the URL given in the field

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

<form>
Redirect the page to the given URL : 
<input id="query" type="text" value="http://www.google.com" /> &nbsp; &nbsp; <input type="submit" value="Submit">
</form>

<script>
document.querySelector('form').addEventListener('submit', ExecuteSearch);
function ExecuteSearch(e) {
    e.preventDefault();
    e.stopPropagation();
    var query = document.querySelector('#query');
    if (!query) return;
    var value = query.value;
    if (!value) return;
	var summary = encodeURIComponent(value);
	var url =  value;
	window.top.location.href = url;
}
</script>

Add an image to the HTML macro

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

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

<html>
<body>

<h2>Images on Another Server</h2>

<img src="https://artemis-test2.atlassian.net/wiki/download/attachments/894664831/largebackground.jpg?api=v2" alt="artemis-test2.atlassian.net" style="width:104px;height:142px;">

</body>
</html>