Link Previews

Whenever you type a URL in one of your messages, TalkJS can generate a preview of that URL like so:

The Link Preview not only displays website thumbnails, but it also displays the embedded player for YouTube, Spotify, and so on...

When no link preview is available for a website, then the message is rendered as normal

Of course, if you have chosen to suppress contact information, neither the URL, nor the Link Preview will appear in the message, unless the URL is in the allowed hostnames.

If you haven't customized your theme yet, then Link Previews are automatically enabled for you on User Messages, and not for System Messages.

If you have customized your theme before April of 2022, then you need to add the <LinkPreviews> component in the MessageBody, right after the body.formattedText in the theme editor, like so:

<span t:if="{{ body.type == 'text' }}" class="message-text">
    {{ body.formattedText }}
    <LinkPreviews links="{{ body.links }}" />
</span>

Now your messages will already have Link Previews, but if the message is short, then the link preview will be too thin, like so:

To fix this, you have to edit the UserMessage in the theme editor, in order to give the has-link-previews class to the message, like so:

<div class="message {{ body.hasThumbnail | then: 'has-thumbnail' }}  {{ showAuthor | then: 'has-author' }} {{hasLinkPreviews | then: 'has-link-previews'}}">

And then give a width of 100% to the message that has link previews, in the <style> block of the UserMessage, like so:

.has-link-previews {
    width: 100%;
}

This will enable Link Previews for both User Messages and System Messages.

If you want to enable Link Previews for User Messages and not for System Messages instead, you have to render the LinkPreviews component conditionally. In order to do so, edit the UserMessage component in the theme editor, and set the isSystemMessage="{{ false }}" property to MessageBody like so:

<MessageBody body="{{ body }}" timestamp="{{ timestamp }}" floatTimestamp="auto" showStatus="{{ sender.isMe }}"
isLongEmailMessage="{{isLongEmailMessage}}" darkenMenuArea="{{ darkenMenuArea }}" isSystemMessage="{{ false }}" />

Then edit the SystemMessage component, and set the isSystemMessage="{{ true }}" property to MessageBody like so:

<MessageBody body="{{ body }}" timestamp="{{ timestamp }}" floatTimestamp="right" isSystemMessage="{{ true }}" />

Finally, in the MessageBody component, change the LinkPreviews component adding a t:if property like so:

<LinkPreviews links="{{ body.links }}" t:if="{{ isSystemMessage | is_falsy }}" />

If you want more control over how the previews appear and wish to filter out specific previews, you can manually loop over link previews using the <LinkPreview> component.

For instance, if you want to remove previews for links that contain specific blocked words, you can do the following:

<div t:for="{{ link in body.links }}" t:key="link" t:if="{{ isSystemMessage | is_falsy }}">
    <t:set linkDoesntContainWord="{{ link contains 'blocked-word' | is_falsy }}" />
    <LinkPreview link="{{ link }}" t:if="{{ linkDoesntContainWord == true and forloop.index < 3 }}" />
</div>

If you don't want the Link Previews functionality in your chat application, then simply remove the <LinkPreviews> component in the MessageBody in the theme editor, and you're done.

Note that you don't have to remove neither the has-link-previews class from the UserMessage, nor the isSystemMessage property from the MessageBody and in fact, they would be better left as-is, because if you want to re-enable Link Previews in the future, you will have one less thing to worry about.