I have a pop-up that works very well in my vanilla Html app properly, that is, when the button is clicked, it opens the pop-up and everything works fine.
The issue I am facing now is that when I use the code in my React, NextJS app, it loads the href and leaves the existing page, I am trying to find a way of ensuring the pop-up still works on the same page without going to another page.
Since the a tag was used in the initial code, I tried using the Link tag in NextJS maybe it would work but it was the same behavior.
Attached below is the code snippet.
import Link from "next/link"
<div className="footer-wrapper">
{/* <Link href="https://app.giveforms.com/forms/listwise/donate?type=popup"><a data-giveform="gf-widget" className="button button-secondary w-button">Support Listwise</a></Link> */}
<a data-giveform="gf-widget" href="https://app.giveforms.com/forms/listwise/donate?type=popup" className="button button-secondary w-button">Support Listwise</a>
</div>
You need to setup widget:
example:
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Sorry but our website on maintenance</title>
<meta name="description" content="Maintenance" />
<script src="https://app.giveforms.com/new/widget-install.js" type="text/javascript"></script>
</Head>
For me it`s helped