Embedded
To include experiences embedded in your page, make sure the page has been setup with the experiences css and javascript (see above for details), and then add the following web component html to your page (with your own custom values for each of the web component attributes):
<reevoo-experiences-embedded
embedded-title="Cycling near Exeter - customer experiences"
description="Many of our guests have had such a great time cycling near Exeter that they were happy to share some of their cycling experiences with others. Their experiences were independently collected by Reevoo, the company that also collects and displays the reviews on our website."
tags="location1:england,general:cycling_tips"
trkref="ABC123"
pagination
styles-brand-color="red"
show-card-driver
spotlight-action-button-title="VIEW COTTAGE"
cards-per-page="10"
driver-purchase-description="Holiday booked"
></reevoo-experiences-embedded>
Find below a description of each of the attributes in the web component:
Name | Required | Default Value | Description |
---|---|---|---|
embedded-title | false | N/A | If a title is provided, it will be displayed at the top of the embedded cards container. |
description | false | N/A | If a description is provided, it will be displayed at the top, as a sub-header, in between the embedded container title and the cards. |
tags | true | N/A | A comma separated list of tags. The embedded cards container will only display content that has been tagged with all the provided tags. Each tag has to be provided in format namespace:tag_key . Both namespace and tag_key have to be downcased and underscored |
trkref | true | N/A | Here you should use your unique account code, which Reevoo will have provided to you. |
styles-brand-color | false | #2fcb59 | This color affects titles, button backgrounds and some links. You can provide any colour name or hex value supported as a CSS colour. |
pagination | false | N/A | This attribute does not have a value. If the attribute is present, the embedded cards container will display classic numbered pagination links by which users can browse the full content. If this attribute is not present, there will be a "More" button at the botton of the container, through which the user can load the next page worth of cards in an infinite scrolling style. Pagination is disabled for mobile devices and replaced by "More" button |
show-card-driver< | false | N/A | This attribute does not have a value. If the attribute is present, every card in the embedded container will display a driver link to the associated product. Otherwise the driver link will not be available. |
spotlight-action-button-title | false | MORE | When you click on a card in the embedded container, the card will open in spotlight view. The spotlight view includes a button to visit the product page associated to the card. You can use this property to configure the label of the button. |
cards-per-page | false | 20 | Define how many cards will be loaded when user switch the page or click on "More" button |
driver-purchase-description | false | Defined by Reevoo | Overwrite purchase description text on product link. If no value is provided, description is taken from Reevoo configuration, which is different for each client. |
Updated about 4 years ago