Step 2: Add Customer Facing Content
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 the Knowledge Graph onto your website. Meaning, once you update content in the Knowledge Graph, 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 the Knowledge Graph on a webpage. Note, you must add the
<script> tag to your page before you can leverage the embed codes to add content.
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:
- Log into your Yext account and hover over your name in the top corner and click Account Settings.
- Click Manage Entity Types in the sidebar and click View Details next to the desired 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:
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 display content stored in Custom Fields on your pages, you can create embed codes using the following format:
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.
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:
To display a custom field that contains a list you would use the following:
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)||
||Monday 12:00pm - 11:00pm|
||12:00pm - 11:00pm|
||Saturday, July 2, 2020 Closed|
||61 9th Avenue|
|Meals Served (list option)||
||List of selected options (e.g., Breakfast, Lunch, Brunch, Dinner, Happy Hour, Late Night)|
||Specific option (e.g., BREAKFAST)|
|Get Directions Link||
||Get Directions (link leads to Google Maps targeting the address)|
||List of relevant attributes separated by commas (e.g., Is owned by women, Offers online classes)|
|Event Start Date and Time||
||October 5, 2022 at 1:00:00 PM|
|Event End Date and Time||
||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 Live API Documentation.