PoolParty Linked Data Frontend Template Guide

This element cannot be used because the CSP disallows the use of unsafe-inline for the script-src directive, blocking inline event handlers like onclick:

<button onclick="alert('Hello!')">Click Me</button>

Move the JavaScript to an external file or a <script> block:

<button id="myButton">Click Me</button><script src="path/to/external.js"></script>

external.js:

document.getElementById('myButton').addEventListener('click', function() { alert('Hello!');});

Similarly, inline style attributes like style="color: red;" are not allowed:

<div style="color: red;">This is red text</div>

Instead, move the styles to an external CSS file or a <style> block:

<div class="red-text">This is red text</div><link rel="stylesheet" href="path/to/styles.css">

styles.css:

.red-text { color: red;}

Passing a dynamic JavaScript variable by embedding it within a forbidden inline <script> tag is also not allowed:

<script> var config = { key: "value" };</script>

Instead, use data-* attributes to pass dynamic data:

<div id="app-config" data-key="value"></div><script src="path/to/config.js"></script>

config.js:

const configElement = document.getElementById('app-config');const config = { key: configElement.getAttribute('data-key')};

Attempting to put whitelisted Google Analytics code in a <script> block will not work since it still counts as inline script execution:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

Instead, externalize the initialization logic into a local file (for example, named ga-setup.js), and place it in your static assets directory, referencing it via a standard <script> tag in your HTML head:

<script type="text/javascript" src="#frontendLink('default/js/ga-setup.js')"></script>