loading

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 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.

<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:

  1. Log into your Yext account and hover over your name in the top corner and click Account Settings.
  2. 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:

     <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>

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)
Email <a data-yext-field="email" </a> info@contact.com
Get Directions Link <a data-yext-field=”get-directions-link”></a> Get Directions (link leads to Google Maps targeting the address)
Logo <img data-yext-field="logo.url"> Small Yext logo
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 Live API Documentation.

Splash Loading