Now that your Framer website or app is live, you may be wondering how to improve your conversion rate, and that’s by adding Testimonials!
This article will show you how to add reviews and testimonials to your Framer website. Here’s a Live demo: https://versatile-questions-815896.framer.app/
Preparation
To embed our Wall of Love on Framer, we must first create a custom component.
Click the top-left Framer logo, then go to Component → Create From Code and click the plus to create a new component. Replace the code with the sample code below.
import * as React from "react"
import IframeResizer from "iframe-resizer-react"
export default function WallOfLove({}) { return ( <IframeResizer log={false} src="https://embed-v2.testimonial.to/w/testimonial" style={{ width: "400px", minWidth: "100%", border: "none" }} /> )}
Here is a quick demo of how to create a Framer component:
Once the component is created, please follow the instructions below to embed your wall of love on Framer pages.
Instructions
Step 1. Visit the Framer site and page where you would like to embed your testimonials. To create a Wall of Love or Testimonial Page, you can create a new page such as /love or /wall-of-love.
Step 2. Next, click ‘Assets’; you will find the WallOfLove component listed in the Components section, then click to drag it to the place where you want to show the Wall of Love. Here is a quick demo:
If the width is too narrow, you can increase the width to 100% for the component.
Step 3. At this point, you should have our sample wall of love displayed. Now it's time to change it to yours. Go to the Assets tab, then click the WallOfLove component
Step 4. You should see the component code like this. You should see the src link from our sample code. That link needs to be changed to the one associated with your wall of love.
Step 5. Go to your Testimonial.to account dashboard and visit the space you want to add to Framer. After clicking the space, you will see "Wall of Love" option on the left sidebar in the Embed section.
Step 6. Click that, then choose the layout you want to display the wall of love. In the last step, you will find the embed code. Find the src URL in the <iframe> tag
💡 You can learn more about customizing your Wall of Love by visiting this article.
Step 7. Copy the URL from above, then replace the URL in your WallOfLove component in Framer in Step 4. Framer should automatically save the update.
Step 8. Click on ‘Publish’, then 'Update', and voila! Your Wall of Love is ready 🥳
With Testimonial.to, you can add video & text testimonials, Twitter tweets, etc., all in one place! ✌️
If you still have a question, please reach out on the live chatbox on the testimonial.to 💬