Skip to main content
All CollectionsEmbed widgets
Embed a Wall of Love
Embed a Wall of Love

Want to have a copy of your Wall of Love on your current website? Here's how.

Damon Chen avatar
Written by Damon Chen
Updated over a month ago

You can now embed your Wall of Love on your page.


Displayed Content

For the content being displayed, we support two options:

  1. All liked testimonials

  2. Tag Selection ( More information here)


General instructions

First, go toย Manage Your Space (Space Dashboard), then hit on the "Embed Options" from the left sidebar to select "Wall of Love."

You will see a popup modal like this. ๐Ÿ‘‡ This is Step 1, You need to choose a layout. We support these 3 layouts for now:

  1. Masonry: scrolling

  2. Masonry, fixed

  3. Carousel slider

Step 2 will show up once Step 1 is done, where you can customize your Wall of Love.


โ€‹A live preview is also available for basic customization setup


Customize the Wall of Love

For the masonry-animated

  • Scroll directions: vertical and horizontal

  • Remove testimonial branding (available for paid plan users).

  • You can choose a dark theme.

  • Hide the date

  • Show heart animation

  • Pause animation on mouse hover: to disable the pause animation of mouse hover in our animated WOL, uncheck the checkbox.

  • Scroll speed: Very slow, Slow, Normal, Fast, Very Fast

  • Top and bottom shadow backgrounds

For the masonry, - fixed layout

  • Remove testimonial branding (available for paid plan users).

  • You can choose a dark theme.

  • Randomize the order of the page refresh.

  • Show heart animation

  • Hide the date.

  • Maximum number of testimonials in the initial load (maximum 100).

  • Auto load more

Each box in the Wall of Love is a card. By default, the width of each card is 350px. You now have the option to customize the width as well. We will provide two choices:

  1. small: width is 250px

  1. large: width is 450px

notion image

๐Ÿ’กWhen the screen size is smaller than 500px, the wall of love will be just one column, and the width of each card will extend to 100% of the screen width.

For the carousel slider layout

  • Remove Testimonial branding (available for paid plan users).

  • You can choose a dark theme.

  • Autoplay

  • Hide the date

  • Show heart animation

  • Enable the show more button for long text (automatically add the button if the text content is longer than 5 lines). Minimize attached images

  • Left and right arrow colors

  • One row in the slider.

    • Same height for all videos

      ๐Ÿ“ข Is a hidden option at first. It only shows up when the one-row option is checked. This option will only take effect when all testimonials are video testimonials, not including YouTube/Vimeo videos.

    Here is a live demo for the same height (source: scrimba.com)


Some hidden configurations for the carousel slider

Adaptive height

By default, the adaptive height is off. What it means is that the height of the whole carousel slider is the same as the highest slide. So you will see the position of the left and right arrows stay fixed no matter where the side is, something like below.

notion image

When the adaptive height is turned on, the height of the whole carousel is always the same as the current slide/slides. So you will see that the position of the left and right arrows keeps changing, and always stays in the middle, something like below:

notion image

To enable the adaptive height, you need to append adaptive-height=on to the embed URL, just like the following, which you will see adaptive-height=on at the end.

https://embed.testimonial.to/carousel/all/flurly-demo?theme=light&one-row=on&one-slide=on&adaptive-height=on

Hide dots

You can choose to hide dots beneath the slider if you want

notion image

To hide dots, you need to append hide-dots=on to the embed URL, just like the following, which you will see hide-dots=on at the end.

https://embed.testimonial.to/carousel/all/flurly-demo?theme=light&one-row=on&one-slide=on&hide-dots=on

One slide (can only be applied to one-row slider)

๐Ÿ‘‰ The following configurations can only be applied when one row in the slider is enabled.

notion image

When one slide is turned on, the one-row slider will only show one slide card at a time. You need to append one-slide=on to the embed URL, just like the following, which you will see one-slide=on at the end.

https://embed.testimonial.to/carousel/all/flurly-demo?theme=light&one-row=on&one-slide=on

notion image

๐ŸŒŸTo remove our logo from the Wall of Love, please upgrade to a paid plan.

If you still have a question, please reach out on the live chatbox, and we will get back to you as soon as possible. ๐Ÿ’ฌ

Did this answer your question?