---
title: "Use case"
canonical: "https://support.appfire.com/space/HTMLM/358318232/Use%20case"
format: markdown
---
> Macro (aura-html)

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.

> 📝 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>
```

## <span style="color: #000000">Include forms from Wufoo</span>

> 📝 - 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:

```xml
<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:

1. Click the meatballs icon.
2. Click *Attachments*.
3. 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>
```