Data API
Data Properties
Our components can automatically fetch meta data from the URL you provide by passing a href attribute. However, you can also pass the data manually like this:
html
<previewbox-link
url="https://web-highlights.com/about"
title="This Title Was Manually Passed"
description="This description was manually passed. The data was not fetched from the URL because no href was provided."
imageUrl="https://picsum.photos/1200/630"
imageAlt="Lorem Ipsum Image"
></previewbox-link>You can find all properties in the API documentation. But, here are the most important properties you can pass to the components:
| Name | Description | Type | Default |
|---|---|---|---|
| url | If the href is not provided, the url will be used to fetch the link preview data. | string | null |
| title | A manually set title for the link preview. | string | '' |
| description | A manually set description for the link preview. | string | null |
| author | A manually set author for the link preview. | string | null |
| imageUrl | A manually set image URL for the link preview. | string | null |
| imageAlt | A manually set image alt text for the link preview. | string | null |
| faviconUrl | A manually set favicon URL for the link preview. If not provided, a fallback favicon will be used. | string | null |
| date | A manually set date for the link preview. | string | null |
HTML Attributes
Our custom elements always contain an anchor tag with the href attribute.
You can customize the anchor tag with the following attributes:
| Attribute | Description | Default |
|---|---|---|
| target | Specifies where to open the linked document. E.g. _blank, _self. | _blank |
| rel | Specifies the relationship between the current document and the linked document. E.g. noopener, nofollow. | undefined |