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. For Make sure to deselect the Sanitize parameter for these examples, make sure to UNCHECK "sanitize."
|
|---|
| Tip |
|---|
You need to UNCHECK "Sanitize HTML 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):
| 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> |
Source Sample source code used in the Jira Issue Collector issue collector HTML macroMacro:
| Code Block |
|---|
<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> |
...
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)from 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>
|
Source
| Info |
|---|
|
Sample source code used in the Wufoo HTML macroMacro:
| Code Block |
|---|
<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.
A The following code block that renders a walking elephant:
| 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> |
Source Sample source code used in the CodePen HTML macroMacro:
| Code Block | ||
|---|---|---|
| ||
<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
| Html macro | ||
|---|---|---|
| ||
<button type="button" onclick="myFunction()">Redirect to Google</button>
<script>
function myFunction() {
window.top.location.href = "http://www.google.com";
}
</script> |
Source code used in the window redirect HTML macroMacro:
| Code Block |
|---|
<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
| Html macro | ||
|---|---|---|
| ||
<form>
Redirect the page to the given URL :
<input id="query" type="text" value="http://www.google.com" /> <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>
|
Source code used in the window redirects to URL HTML macroMacro:
| Code Block |
|---|
<form>
Redirect the page to the given URL :
<input id="query" type="text" value="http://www.google.com" /> <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 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 the Name and copy the link address.
...