In this guide, we are going to use Cotter to authenticate your users and get them to a target page that you want using magic links.

There's an issue with the Login Here button with the integration so we're going to add a slight change to hide that button

1. Follow the guide from Cotter's Dashboard

First, follow the guide from Cotter's Dashboard under Project > Add the Login Form to your Website. Choose the No-Code Tools guide.

Add Cotter to your Project

Copy paste the code into your Typedream Site by going to Site Settings > Code Injection > Site Header.

Add a button that opens the modal

Create a button at Typedream, then insert a Link to #/ct/login/form_default following the guide on Cotter's Dashboard.

2. Update code injection to hide the "Login Here" button on the magic link page

When your users receive a magic link to their email, they will be redirected to a page that looks like this. We're removing the button that says "Login Here" as the redirection from that button has some issues.

To do so, update the code that you added to Site Settings > Code Injection to the following:

  • Add in data-cotter-config='{"RedirectMagicLink":false}' to your script.

The final code should look like this:

<!--Get Cotter JS SDK-->  
    src="[email protected]/dist/cotter.loader.js"    
    data-cotter-api-key-id="<YOUR API KEY ID>"

(The <YOUR API KEY ID> part based should be based on what you see in Cotter's Dashboard)

🎉 That's it

All should be working correctly after this change.

Made in Typedream