Placement of link preview popups

You can show link preview popups in specific webpage sections using CSS selectors. For example, it's common to display link previews in a blog post section, not in a header & footer. To do that, you need to specify the webpage's HTML elements(containers) where you want link previews to appear.

Your webpage HTML markup usually looks like this:

   <div class="header">...</div>
   <div class="main-content">...</div>
   <div class="footer">...</div>
</body>```

Based on the example above, to enable link previews only inside "main content", add `.main-content` CSS class to the "Placement" settings. This will prevent link previews from appearing in header and footer of your website.


![](https://storage.crisp.chat/users/helpdesk/website/647c175da1b93800/screenshot-2024-04-01-at-21255_9xtisi.png)


* Supported CSS selectors: [class](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors), [type](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors), [id](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors), [attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)

Best Practice:
* Choose a parent container element, instead of targeting individual `<a>` link elements
* You can add multiple HTML containers
* Instead of targeting generic HTML classes, add unique HTML attribute for container where you want link previews to appear, e.g. `<div  data-linkz-ai-container>...</div>`, then add the following CSS selector:  `div[data-linkz-ai-container]` to "Limit Link Previews to HTML container(s)" setting

Updated on: 01/04/2024