Display Images and URLs to Links
Images and Links can be added directly to layouts within Agent. The options are available on any layout, but the typical usage is ESP cards for Product and Store/Location information and on the Product Detail dialog.
Examples:
Product Information via Product ESP Cared (
IssueProductEspH) and/or Product Details Dialog (ProductDetailsDialogH) - display the image of the product and/or a link to product details form the company/brand website or third-party website such as smartlabel.org.Store/Location ESP card (
IssueAddressEspH) - display a link to store/restaurant details available on a brand’s website or a third-party site such as maps.google.com.
The source value for the image and/or URL link can be a combination of hard-coded values defined in the layout and dynamic values stored in related/relevant categories.
Add an image
Steps:
Select the appropriate layout in the layout editor by selecting it in the dropdown in the layout editor or the Windows Details Dialog while viewing a case.
Examples:IssueProductEspHProductDetailsDialogHIssueAddressEspH
In layout editor, drag the field (Image) to add to a ESP layout.
Click the field and edit Image Properties in the right side panel.
Image properties fields:
Image Source the URL for the image.
Alternative Description used as a label for this element in the layout editor, which can be useful if more than one link or image is used. It also shows up if the image link is not able to display.
Width is the percentage of containing element the image is on (here the ESP panel).
It defaults to 100% which takes up the entire width of ESP.Height is default to be blank which automatically stretches proportionally to the width.
It’s recommended that only width or height is set, and the other one is left blank. Be sure to test the setting for a variety of images to determine the best setting for your typical usage. Percentage is recommended but pixel values are accepted as well. For example, width: 20px
Using a category code
You can use a category code as a part or the entire string of the URL and/or description.
The category code must be inside double braces {{}}.
Using the category code can be useful for scenarios like displaying different product images with the same base url.
Example:
A brand might have an ecommerce or general web site with individual product pages. The link in the product ESP card could be a combination of the website URL (“www.brandsite.com/product/”) and the individual page identifier that is stored in as product attribute (an E code, such as e31_code). The value in E31 could be manually entered/maintained or updated via a product import routine/utility. Or, the product attribute/E Code could contain the entire URL.
In IssueProductEspH, Image Source: {{data._$e31_code}}
and on a product E31 is set to “https://sandbox.astutesolutionsdemo.com/omegamarketv2/img/dogs/smallDog.jpg”
Image in https://sandbox.astutesolutionsdemo.com/omegamarketv2/img/dogs/smallDog.jpg would display.
Alternatively, you can set E31 to “smallDog” on product PET LID DOG SM and set Image Source to: https://sandbox.astutesolutionsdemo.com/omegamarketv2/img/{{data._$e31_code}}.jpg
In a case when you set product to PET LID DOG SM, the product ESP card would display the same image.
Add a link
Steps:
In layout editor, drag the field (Link) to a ESP layout.
Click the field and edit Link Properties in the right side panel.
Image properties fields:
URL is the url of the link to open.
Text to display is the text label.
Title is the text that shows up when you hover over the link.
Open link in allows you to choose to open th link in the new browser tab or window.
URL, Text to display, and Title fields can contain category code. The syntax is the same as URL in image properties.
