Banner Script Installation
Install the GoPayLocal banner script on your site with a single script tag.
The banner script is the simplest way to add PPP discounts to your site. One <script> tag and you’re done.
Quick Install
Section titled “Quick Install”Add this script tag to your site, just before the closing </body> tag:
<script src="https://api.gopaylocal.com/v1/banner/script.js?key=YOUR_PUBLIC_KEY" async></script>Replace YOUR_PUBLIC_KEY with your public API key (starts with gpl_pk_). You can find it in the Dashboard.
Framework-Specific Installation
Section titled “Framework-Specific Installation”<!DOCTYPE html><html><head> <title>My App</title></head><body> <h1>My Pricing Page</h1>
<!-- GoPayLocal Banner Script --> <script src="https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123" async ></script></body></html>import Script from 'next/script';
export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( <html lang="en"> <body> {children} <Script src="https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123" strategy="afterInteractive" /> </body> </html> );}import Script from 'next/script';import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) { return ( <> <Component {...pageProps} /> <Script src="https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123" strategy="afterInteractive" /> </> );}<html lang="en"> <head> <meta charset="utf-8" /> <title>My Site</title> </head> <body> <slot /> <script src="https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123" is:inline async ></script> </body></html>How It Works
Section titled “How It Works”- The script loads asynchronously — it does not block page rendering
- It makes a single API call to fetch PPP config for the visitor’s country
- The response is cached in
sessionStoragefor 5 minutes - A discount banner renders inside a Shadow DOM element
- Subsequent page loads within the session use the cache — no additional API calls
Shadow DOM Isolation
Section titled “Shadow DOM Isolation”The banner is rendered inside a Shadow DOM, which means:
- Your site’s CSS cannot accidentally break the banner
- The banner’s CSS cannot leak into your site
- The banner cannot access your page’s DOM, cookies, or JavaScript scope
- No layout shifts — the banner uses
position: fixedand overlays your content
Script Size
Section titled “Script Size”| Metric | Size |
|---|---|
| Uncompressed | ~5 KB |
| Gzipped | ~1.5 KB |
| Brotli | ~1.3 KB |
This is significantly smaller than most analytics scripts, chat widgets, or A/B testing tools.
Content Security Policy (CSP)
Section titled “Content Security Policy (CSP)”If your site uses a Content Security Policy, add these directives:
script-src 'self' https://api.gopaylocal.com;connect-src 'self' https://api.gopaylocal.com;Subresource Integrity (SRI)
Section titled “Subresource Integrity (SRI)”The banner script URL includes your API key as a query parameter, which means the script content is dynamically generated per-key. SRI hashes are not applicable for dynamic scripts. The script is served over HTTPS with TLS 1.3.
Only Load on Pricing Pages
Section titled “Only Load on Pricing Pages”If you only want the banner on specific pages (e.g., your pricing page), conditionally add the script:
<script> if (window.location.pathname === '/pricing') { const s = document.createElement('script'); s.src = 'https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123'; s.async = true; document.body.appendChild(s); }</script>