Once you have successfully added the script tag to your website (see Add Knowledge Tags to Your Website), you can add customer-facing content to your pages using embed codes. This allows you to display content from entities stored in Yext on your website. Meaning that once you update content on an entity, that update will automatically be reflected on your website.
Note: You must add the <script>
tag to your page before you can leverage the embed codes to add content.
To add customer-facing content to your site:
- Click Pages in the navigation bar and click Knowledge Tags.
- Click on the Add Knowledge Tags to Website button.
- Click on the Select Entity button and select the desired entity.
- If applicable, select your desired locale.
- If applicable, select your desired Analytics Settings.
- Obtain embed codes for the fields you would like powered by the Yext Knowledge Graph. To view additional entity fields, click on the More Fields link.
- Add the embed codes wherever you want them to appear on your website.
Example
You can use the following embed tag to display any content from Yext entities directly on a webpage.
<span data-yext-field="name"></span>
To select a field from Yext, update the value of data-yext-field
to the API name of the field you want to display. In the example above, we are displaying the Name field. See View the API Name for a Field to locate the API names for entity fields.
Pages with multiple entities
If your page displays content for multiple entities, make sure your embed codes also include the data-yext-id
property that specifies which entity’s data should be used in the tag. For example:
If your page displays content for multiple entities, make sure your embed codes also include the data-yext-id
property that specifies which entity’s data should be used in the tag. For example:
- If your page is for one entity, the address code will look like this:
<span data-yext-field="address.line1"></span>
- If your page displays multiple address fields, the address code for each address will like look this:
<span data-yext-field="address.line1" data-yext-id="815"></span>
To fetch data from multiple entities, you must include an entity_id parameter per entity in your Knowledge Tag request (e.g. entity_id=example1&entity_id=example2
).
Custom Fields
To display content stored in Custom Fields on your pages, you can create embed codes using the following format:
<span data-yext-field="c_myCustomField"></span>
Here, c_myCustomField
is the API Name of the custom field and the HTML Tag (in example, the <span>
), will differ depending on the field type.
List Fields
To display a list type field on your page, you can use any of the following HTML tags to display content from list field types on your page:
-
<ul>
— bulleted lists -
<ol>
— numbered lists -
<span>
— comma-separated list on one line -
<div>
— creates a series of<div>
elements, each on a separate line
For example, to display a bulleted list of your products, you would use the following embed tag:
<ul data-yext-field=”products”></ul>
To display a custom field that contains a list you would use the following:
<ul data-yext-field="c_listField"></ul>
Additional Fields
Below you will find a list of some of the fields that can be used to embed content onto pages. These fields are being highlighted, as Knowledge Tags returns the data in a specific format.
Field Name | Embed Tag | Display |
---|---|---|
Hours (with day of week) | <span data-yext-field="hours"></span> |
Monday 12:00pm - 11:00pm |
Hours | <span data-yext-field="hours-monday"></span> |
12:00pm - 11:00pm |
Holiday Hours | <span data-yext-field="holidayHoursFormatted"></span> |
Saturday, July 2, 2020 Closed |
Address | <span data-yext-field="address.line1"></span> |
61 9th Avenue |
Meals Served (list option) | <span data-yext-field="mealsServed" <span> |
List of selected options (e.g., Breakfast, Lunch, Brunch, Dinner, Happy Hour, Late Night) |
Meals Served | <span data-yext-field="mealsServed[0]" <span> |
Specific option (e.g., BREAKFAST) |
info@contact.com | ||
Get Directions Link |
|
Get Directions(link leads to Google Maps targeting the address) |
Logo | <img data-yext-field="logo.url"> |
![]() |
Google Attributes | <span data-yext-field="googleAttributesFormatted"></span> |
List of relevant attributes separated by commas (e.g., Is owned by women, Offers online classes) |
Event Start Date and Time | <div data-yext-field="start-datetime"</div> |
October 5, 2022 at 1:00:00 PM |
Event End Date and Time | <div data-yext-field="start-datetime"</div> |
October 5, 2022 at 4:00:00 PM |
For a full list of how all other entity data will be named and formatted, visit our Content Delivery API Documentation .