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

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='' 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;
  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: