Examples - HTML Macro for Confluence Cloud

Feel free to copy paste the HTML into your own Confluence Cloud HTML Macro (which you can trial for free) to try out the capabilities. For these examples make sure to UNCHECK "sanitize".

For most of these examples you need to UNCHECK "Sanitize HTML".

JIRA Issue Collector

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

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 (you must unselect "Sanitize") (HTML source is copied from what Wufoo provides when you create a form)

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>

CodePen is a playground for the front end web.

CodePen is a playground for the front end web

A codeblock which renders a walking elephant

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 URL given in field

Source code used in the window redirect to 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>

Adding an image into the HTML macro:

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

Click on the meatballs icon
Click on Attachments
Right-click on 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>