Using Plain HTML, React, and Next.js

HTML

Here's a complete example using Vanilla HTML

index.html
<script
src="https://js.cotter.app/lib/cotter.js"
type="text/javascript"
></script>
โ€‹
<div id="cotter-container-signup"></div>
โ€‹
<script>
var config = {
ApiKeyID: "aaf7319d-8f91-4752-a23f-c43ba862d548",
RedirectURL: "https://yourwebsite.com/account/create",
Type: "PHONE", // EMAIL or PHONE
ContainerID: "cotter-container-signup",
CountryCode: ["+62"],
ButtonBackgroundColor: "#000000",
ButtonTextColor: "#ffffff",
ButtonText: "Sign Up Now",
AdditionalFields: [
{
label: "Full Name",
name: "name",
placeholder: "Enter your full name"
}
],
IdentifierField: "phone",
OnBegin: payload => {
if (payload.identifier != "+12345678910") {
return "Phone Number is not allowed (Remove this example code)";
}
return null;
},
OnSuccess: payload => {
// SET Token Cookie/localstorage here
window.localStorage.setItem("access_token", payload.access_token);
window.localStorage.setItem("refresh_token", payload.refresh_token);
window.location.href = "/signin";
}
};
var cotter = new Cotter(config);
cotter.showForm();
</script>

React

Initialize Cotter in index.html and show the form in signup.js

HTML
JS
HTML
index.html
<script
src="https://js.cotter.app/lib/cotter.js"
type="text/javascript"
></script>
โ€‹
<script>
var config = {
ApiKeyID: "aaf7319d-8f91-4752-a23f-c43ba862d548",
RedirectURL: "https://yourwebsite.com/account/create",
Type: "PHONE", // EMAIL or PHONE
ContainerID: "cotter-container-signup",
ButtonBackgroundColor: "#000000",
ButtonTextColor: "#ffffff",
ButtonText: "Sign Up Now",
AdditionalFields: [
{
label: "Full Name",
name: "name",
placeholder: "Enter your full name"
}
],
IdentifierField: "phone",
OnBegin: payload => {
if (payload.identifier != "+12345678910") {
return "Phone Number is not allowed";
}
return null;
},
OnSuccess: payload => {
// SET Token Cookie/localstorage here
window.localStorage.setItem("access_token", payload.access_token);
window.localStorage.setItem("refresh_token", payload.refresh_token);
window.location.href = "/signin";
}
};
var cotter = new Cotter(config);
</script>
JS
signup.js
import React, { Component } from "react";
โ€‹
class SignUp extends Component {
componentDidMount() {
window.cotter.showForm();
};
โ€‹
render() {
return (
...
<div id="cotter-container-signup"></div>
...
)
}

Next.JS

signup.js
import React, { Component } from "react";
import Head from "next/head";
โ€‹
class IndexPage extends Component {
componentDidMount() {
var config = {
ApiKeyID: "<api key id>",
RedirectURL: "https://yourwebsite.com/account/create",
Type: "EMAIL", // EMAIL or PHONE
ContainerID: "cotter-container-signup",
IdentifierField: "email",
OnSuccess: payload => {
// SET Token Cookie/localstorage here
window.localStorage.setItem("access_token", payload.access_token);
window.localStorage.setItem("refresh_token", payload.refresh_token);
window.location.href = "/signin";
}
};
var cotter = new Cotter(config);
cotter.showForm();
}
render() {
return (
<div>
<Head>
<script
src="https://js.cotter.app/lib/cotter.js"
type="text/javascript"
></script>
</Head>
<p>Hello world!</p>
<div id="cotter-container-signup"></div>
</div>
);
}
}
โ€‹
export default IndexPage;