Ensuring the preview image is visible in the Chat Widget

Conditions for displaying a preview image

To ensure the preview image is displayed correctly, the URL shared in the chat widget must include an image that is embedded in the meta tags of the website. Without this image, only the text of the URL will be shown, without any visual support.

How to add a preview image to the meta

Here are the steps to add an image to the meta of your website:

1. Open the HTML code of your webpage: This can be done through your CMS (Content Management System), such as WordPress, Wix, or Lightspeed, or directly in the HTML code if you manage the website yourself.
2. Locate the head tag: The meta information of your webpage is always located between the and tags of your HTML.
3. Add the Open Graph meta tag: Use the following code to add an image for social media previews and chat widgets:

<meta property="og:image" content="URL-to-your-image.jpg" />

Make sure the "URL-to-your-image.jpg" points to the exact location of the image you want to display as preview.

4. Save changes and publish the page: Ensure that you save the changes and republish the website. Test by sharing the URL in a chat widget to verify that the image appears correctly.

Troubleshooting common issues

If the image still does not appear after adding the meta tags, check the following:

• Image size: Ensure that the image is at least 1200 x 630 pixels for optimal display.
• File type: Use one of the following file types: .jpg, .png, or .gif.
• Clear cache: Sometimes, you may need to refresh your website's cache for the changes to become visible. This can be done via your browser settings or the CMS you’re using.

By following these steps, you can ensure that a URL with a preview image is displayed correctly in the chat widget when ‘Unfold URLs' is enabled.