Articles on: Configuration

Limit Link Previews to HTML container(s)

You can specify HTML elements(containers) of the webpage where you want link previews to show up.

Your webpage HTML markup usually looks like this:

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


To enable link previews only inside "main content", add .main-content CSS class to the "Limit to HTML container" settings. This will prevent link previews from appearing in header and footer of your website.



Supported CSS selectors: class, type, id, attribute

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: 06/01/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!