Framer
Add GoPayLocal PPP discounts to your Framer site.
Add GoPayLocal to Framer using the custom code feature.
Installation
Section titled “Installation”-
Get your API key from the GoPayLocal dashboard
-
Add the script to your site
In Framer, go to Site Settings > General > Custom Code.
In the End of
<body>tag section, paste:<scriptsrc="https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123"async></script>Save and publish.
-
Configure discounts in the GoPayLocal dashboard
Page-Specific Installation
Section titled “Page-Specific Installation”To add the banner only on specific pages:
- Open the page in Framer
- Go to the page settings (gear icon)
- Add the script in the page’s custom code section
Custom Code Component
Section titled “Custom Code Component”For more control, create a Framer code component:
// GoPayLocalBanner.tsx (Framer Code Component)import { useEffect } from 'react';
export default function GoPayLocalBanner() { useEffect(() => { const script = document.createElement('script'); script.src = 'https://api.gopaylocal.com/v1/banner/script.js?key=gpl_pk_live_abc123'; script.async = true; document.body.appendChild(script);
return () => { document.body.removeChild(script); }; }, []);
return null;}Add this component to your page in the Framer editor.
React SDK in Framer
Section titled “React SDK in Framer”Since Framer supports React code components, you can use the React SDK directly:
// PricingCard.tsx (Framer Code Component)import { GoPayLocalProvider, PPPPrice } from '@gopaylocal/react';
export default function PricingCard() { return ( <GoPayLocalProvider apiKey="gpl_pk_live_abc123"> <div style={{ textAlign: 'center' }}> <h3>Pro Plan</h3> <div style={{ fontSize: '2rem', fontWeight: 700 }}> <PPPPrice price={9.99} /> </div> <span>/month</span> </div> </GoPayLocalProvider> );}