Back
Step 2: Add Customer Facing Content
Overview
Once you have successfully added the script tag to your website, you have the option to add customer-facing content to your pages using embed codes. This allows you to display any content from entities stored in Yext onto your website. Meaning, once you update content on an entity, that update will automatically be reflected on your website.
Add Content to your site
You can use the following embed tag to display any content from Yext entities directly on a webpage. Note, you must add the <script> tag to your page before you can leverage the embed codes to add content.
<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.
To locate the API names for entity fields:
- In Yext, click Content in the navigation bar, and then Configuration.
- Select Manage Entity Types. Choose an entity type and click View Details next to the entity type on the right of the screen.
- Click the Fields section at the top of the page to view the fields for that entity type. Under each field name, you will see the API name for each field.
Pages with multiple entites
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 this 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 .