All links on the site that exit the site are required follow a specific user workflow. This includes making sure that all the links have the correct markup, indicating that they are external link, as well as driving the user through the Exit Popup. This popup informs the user that they are leaving the MUFG Americas site along with other legal information.

The way this works is;

• Every external link on the site is required to have the relationship attribute set to external (rel="external"), as well as the outbound-link class.
• The outbound-link class is used to trigger the exit popup where they can either continue or cancel.
• The exit popup is controlled by the Modal Block content Leaving Site Interstitial. Structure > Block Layout > Custom Block Library (search for Modal block). This sets the copy and button text. It is important that the unique-id for that block is set to outbound-interstitial. 
• For all Menu links and Content Card links the attributes and classes are automagically added to ensure that all external links are correct.
• For all link with the Text Editor the Editors will need to use the Link tools provided to add those 2 settings.

As noted all automatically generated links are able to leverage the link field functionality in order to automatically add the required settings. This includes the Menu links, Content Card (link fields) and Social Sharing/Follow links. The settings are handled in preprocess functions and twig features. It is important that the unique-id for the block stay as indicated; or that the automatic functionality gets updated to reflect the change.

In order to make the external links work using the Text Editor the Editors will need to use the advanced tools available for links. In those tools they will need to update a few settings to tell the site to use the outbound popup. The steps are fairly straight forward (see images).

1. Create a new link using the Link button (chainlink icon).
   1. If a link already exists, place the cursor in the link and right click. Select Edit Link
2. Link Info tab: make sure that all the settings are filled out and that the protocol is set to https (or other external setting).
3. Target tab: set the Target setting to New Window (_blank).
4. Advanced tab: adjust the following settings.
   1. Style Sheet Classes: make sure outbound-link is one of the space separated classes.
   2. Relationship: set this to external

That's it; the user should now see the outbound link interstitial.

Click images below for examples.