Adding 'new window' icons to links in Teneo Web Chat

Knowledge Articles
1

Teneo Web Chat supports various ways to link to (external) pages like Link buttons or regular links in answer texts.

Sometimes you may wish to add a ‘new window’ icon to links that open in a new window. This can be achieved by creating a custom css style sheet that contains the folllowing style definitions:

.teneo-web-chat .twc-text-message__text a[target="_blank"]::after, 
.teneo-web-chat .twc-linkbuttons a[target="_blank"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3Cstyle%3E.cls-1,.cls-2%7Bfill:none;stroke:%23565867;stroke-miterlimit:10;%7D.cls-1%7Bstroke-linecap:square;%7D%3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='3.5' y1='1.5' x2='0.5' y2='1.5'/%3E%3Cline class='cls-1' x1='0.5' y1='9.5' x2='0.5' y2='1.5'/%3E%3Cline class='cls-1' x1='8.5' y1='9.5' x2='0.5' y2='9.5'/%3E%3Cline class='cls-1' x1='8.5' y1='6.5' x2='8.5' y2='9.5'/%3E%3Cline class='cls-2' x1='4.5' y1='5.5' x2='9.5' y2='0.5'/%3E%3Cline class='cls-1' x1='9.5' y1='3.5' x2='9.5' y2='0.5'/%3E%3Cline class='cls-1' x1='6.5' y1='0.5' x2='9.5' y2='0.5'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  display: inline-block;
  width: 10px; 
  height: 10px;
  margin: 0 0 0 4px;
  content:"";
  filter: initial !important;
}

The example above looks for links in answer texts or link buttons that have a target ‘_blank’ and appends a new window icon at the end (the icon is included as an svg in the css).

For more details on styling the look & feel of Teneo Web Chat, see: