referlist
SDK for Referlist
-
Install
referlist
via npm by runningnpm install referlist --save
in your React app. -
Import
referlist
in the page where you're collecting emails.import referlist from "referlist";
-
Initialize
referlist
with your domain incomponentDidMount
of the component where you're collecting signups.
componentDidMount = () => {
referlist.initialize({ domain: 'NAME_OF_YOUR_DOMAIN' });
};
Make sure to replace NAME_OF_YOUR_DOMAIN
with the domain you entered in the Referlist setup page.
If you're fancy and use function components and hooks, initialize Referlist in a useEffect
function that runs once on mount like so:
useEffect(() => {
referlist.initialize({ domain: 'NAME_OF_YOUR_DOMAIN' });
}, []);
If you're using NextJS, note that this library accesses the window
object and needs to run client-side. Use dynamic imports to get around this. You can read more in this closed issue.
const Referlist = dynamic(
() =>
import("referlist").then((referlist) =>
referlist.initialize({ domain: "NAME_OF_YOUR_DOMAIN" })
),
{ ssr: false }
);
and then render <Referlist />
in your function body.
- Add the following
id
to the input field and button where you collect emails
Add id="referlistemail"
to the input field where the user enters their email and id="referlistbutton"
to the button they click to sign up for your waitlist
For example
<input type="text" id="referlistemail" />
<input type="button" id="referlistbutton" value="Join waitlist"/>
Here's a sample component with the above pieces put together.
import React, { Component } from "react";
import referlist from "referlist";
class Signup extends Component {
componentDidMount = () => {
referlist.initialize({ domain: 'NAME_OF_YOUR_DOMAIN' });
};
render() {
return (
<div>
<input type="text" id="referlistemail" />
<input type="button" id="referlistbutton" value="Join waitlist" />
</div>
);
}
}
export default Signup;
and here it is with hooks
import React, { Component } from "react";
import referlist from "referlist";
function Signup{
useEffect(() => {
referlist.initialize({ domain: 'NAME_OF_YOUR_DOMAIN' });
}, []);
render() {
return (
<div>
<input type="text" id="referlistemail" />
<input type="button" id="referlistbutton" value="Join waitlist" />
</div>
);
}
}
export default Signup;
and here it is with NextJS
import dynamic from "next/dynamic";
export default function Home() {
const Referlist = dynamic(
() =>
import("referlist").then((referlist) =>
referlist.initialize({ domain: "NAME_OF_YOUR_DOMAIN" })
),
{ ssr: false }
);
return (
<div className="container">
<Referlist />
<div>
<input type="text" id="referlistemail" />
<input type="button" id="referlistbutton" value="Join waitlist" />
</div>
</div>
);
}
Please refer http://docs.referlist.co/#/?id=install-referlist-via-npm for more information