shorter-demo.html

<div data-action-network-demo>
	<div field-textarea="Action Network URL" data-action-network-url style="display: none;">
https://actionnetwork.org/forms/demo-the-action-network-toolset
	</div>
	<div data-action-network-target></div>
</div>

<script>
(function () {
	var box = document.querySelector('[data-action-network-demo]');
	if (!box) return;

	var field = box.querySelector('[data-action-network-url]');
	var target = box.querySelector('[data-action-network-target]');
	var raw = field ? field.textContent.trim() : '';

	raw = cleanActionNetworkUrl(raw);
	if (!raw || !target) return;

	var types = {
		forms: 'form',
		petitions: 'petition',
		events: 'event',
		letter_campaigns: 'letter_campaign',
		call_campaigns: 'call_campaign',
		fundraising: 'fundraising',
		fundraisers: 'fundraising',
		ticketed_events: 'ticketed_event'
	};

	var parts = raw.split('/');
	var type = types[String(parts[0] || '').toLowerCase()];
	var slug = String(parts[1] || '').split('?')[0].split('#')[0];
	if (!type) return;
	if (!slug) return;

	var css = document.createElement('link');
	css.rel = 'stylesheet';
	css.href = 'https://actionnetwork.org/css/style-embed-v3.css';
	document.head.appendChild(css);

	target.innerHTML = '<div id="can-' + type + '-area-' + slug + '" style="width:100%"></div>';

	var script = document.createElement('script');
	script.src = 'https://actionnetwork.org/widgets/v6/' + type + '/' + slug + '?format=js&source=widget';
	target.appendChild(script);

	function cleanActionNetworkUrl(value) {
		var lower = value.toLowerCase();
		var protocolIndex = lower.indexOf('://');

		if (protocolIndex !== -1) {
			value = value.slice(protocolIndex + 3);
			lower = value.toLowerCase();
		}

		if (lower.indexOf('www.') === 0) value = value.slice(4);
		if (value.toLowerCase().indexOf('actionnetwork.org') === 0) value = value.slice('actionnetwork.org'.length);

		while (value.charAt(0) === '/') value = value.slice(1);
		return value;
	}
})();
</script>