Add and customize social login icons

After social login (open authentication) is enabled, social login icons display automatically when the External Login component is used, but you can also add them manually.

Social If you are not already using the Log In component and want to add it, open the HTML WYSIWG Content Editor for your page. HTML WYSIWGs are available in many areas. For example, PageBuilder pages, TeamRaiser pages, Donation forms, etc.

  1. Open the HTML Content Editor for the page on which you want to add the login component.

    Example: To add the Login component to a TeamRaiser web page, open the TeamRaiser list, choose Edit. Open the Customize Pages section. Find the page where you want to add social login, and click Configure.

  2. In the HTML Content Editor, click the Component icon > Login > External Login.

  3. Click Save.

  4. (Optional) Click Preview to view your page and check your social login icons and placement.

    Tip: The login component only displays when a user is not logged into your site.

  1. Open your Social Login Dashboard, and select the Manage Engage App icon.

  2. Under Widgets and SDKs, click Sign-ins.

  3. From here, you can customize Layout and Style. See the Janrain blog for social login customization.

    For example, under Layout, you can choose whether you want your icons embedded on the page, or modal, which makes them appear in a popup window. You can choose how many per page, change the login text near your icons, etc.

    The Style section enables you to change color, border, and font options.