User auth slots
The UserAuth drop-in component provides several slots that can be used to customize the presentation of its containers.
Extending drop-in components describes default properties available to all slots.
PrivacyPolicyConsent slot
The PrivacyPolicyConsent
slot can be used to display the privacy policy consent message in the SignUp
container. The following example shows how to use this slot to display a custom privacy policy message and link, as shown in the image below.
SignUp container with PrivacyPolicyConsent
provider.render(SignUp, { routeSignIn: () => getRoute('#SignIn'), routeRedirectOnSignIn: () => getRoute('#AuthCombine'), slots: { PrivacyPolicyConsent: async (ctx) => { const wrapper = document.createElement('span'); const link = document.createElement('a');
Object.assign(wrapper.style, { color: 'var(--color-neutral-700)', font: 'var(--type-button-2-font)', letterSpacing: 'var(--type-button-2-letter-spacing)', textAlign: 'left', display: 'block', fontSize: '12px', marginBottom: 'var(--spacing-medium)', });
link.href = '/privacy-policy'; link.target = '_blank'; link.textContent = 'Privacy Policy';
wrapper.append( 'By creating an account, you acknowledge that you have read and agree to our ', link, ', which outlines how we collect, use, and protect your personal data.' );
ctx.appendChild(wrapper); }, },})(document.getElementById('SignUp'));
SuccessNotification
The SignIn
, SignUp
, and UpdatePassword
containers can use the SuccessNotification
slot display a success message after a user successfully performs an action. See the SuccessNotification container for more information.