Sign-in Button
Overview
The Sign-in Button puts Log in and Sign up buttons on your site, usually in the header. Once a reader is signed in, the two buttons are replaced by one My account button.
- Log in opens the login window.
- Sign up opens the sign-up window. It is the main button, filled with your colour.
- My account opens the reader's account window.
The buttons change by themselves when a reader signs in or out, without reloading the page.
Set up
- Go to
Audience Operation>Experienceand clickNew Experience. - Pick Signin Button, then click
Next Step. - Enter a Name, choose the Project and turn on Enable.
- Set the settings:
| Setting | What it does |
|---|---|
| Log in text | The text of the login button. "Log in" if you leave it empty. |
| Sign up text | The text of the sign-up button. "Sign up" if you leave it empty. |
| Signed-in text | The text of the button signed-in readers see. "My account" if you leave it empty. |
| Button colour | The colour of the buttons. The sign-up button is filled with it, the others use it for the border and text. |
| Sign up text colour | The text colour on the filled sign-up button. |
| Show the sign up button | Turn it off to show only Log in, for example when sign-up happens elsewhere. |
- Click
Save Changes. The preview shows the buttons for signed-out and signed-in readers.
Put it on your pages
Place the buttons where they should appear, usually in your site header. Copy the snippet from the experience, which fills in its ID, or replace EXPERIENCE_ID yourself:
<div data-exp="unisignin-button" data-exp-id="EXPERIENCE_ID"></div>
You can leave out data-exp-id. The buttons then use the Signin Button experience delivered to the page, or the default text and colour. To use the default experience without creating one, set data-exp-id="default-signin".
Change the text on one page
To use different text on one page, whatever the experience setting, add these to the placeholder:
| Attribute | What it changes |
|---|---|
data-login-text | The login button. |
data-signup-text | The sign-up button. |
data-home-text | The button signed-in readers see. |
<div
data-exp="unisignin-button"
data-exp-id="EXPERIENCE_ID"
data-signup-text="Join free"
></div>
Open sign-in from your own button
If you'd rather use your own links or buttons, you can open the same login, sign-up and account windows from your code, or with a link that opens login or sign-up when the page loads. See the JavaScript API.
See the Sign-in Button experience and Set up experiences on your website.
Stay ahead in first-party data
Identity, consent, audience, and subscription insights for publishers. A few emails a month, no spam.