Callouts with multiple external links

By default GRAVITY allows you to configure a single external “Read More“ link which can be used to provide access to additional materials, but there are some specific cases when having just a single link is not enough to cover the business case. Possible solution for such cases is to use custom embedded code to have full control on the content shown inside of such callouts.

Out of box “Embedded code“ feature is deactivated as it allows content owners to inject any Java Script code on a page which might break security rules of your Company.
It there is no security restrictions, the feature must be activated for a target site using GRAVITY Admin backend:

Once it activated and page is reloaded to get the latest configuration, the corresponding drop down menu item is available on the Step 1 of Ring Menu:

Code from the example provided below can be modified and pasted to the 'Embed code' input.
Also as automatic size of callouts is not supported for such type of content, height and width of callout can be adjusted on Step 2 of the Ring Menu.

Example:

<style>
.gravity__embedded-code__link:link {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
.gravity__embedded-code__link:visited {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
.gravity__embedded-code__link:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
.gravity__embedded-code__link:active {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}
.gravity__embedded-code__container  {
  font-size: 16px;
}
</style>
<div class='gravity__embedded-code__container' align='left'>
Steps to be done to book a conference room: 
<br>
<a class='gravity__embedded-code__link' href='https://booking.site/overview' target='_blank'>Step 1: </a>Look for available rooms
<br>
<a class='gravity__embedded-code__link' href='https://booking.site/booking' target='_blank'>Step 2: </a>Create booking 
<br>
<a class='gravity__embedded-code__link' href='https://booking.site/print' target='_blank'>Step 3: </a>Print confirmation
<br>
</div>

Useful modifications of the code above:

color: white; - defines text color for links. Also can be customized for visited/active/hovered states.

font-size: 16px; - defines font size for content shown.