Framer helps you design and publish a website or mobile app faster than ever before. Go from design to world-class site with Framer, the web builder for creative pros.
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/
What is Testimonial.to?
Testimonial effortlessly lets you collect customer reviews and display them on your Framer website with customized, interactive and beautiful review widget features.
We make it easy to capture, manage, and broadcast testimonials to improve the reputation of your brand or service and help you convert better.
What’s more? With testimonial.to, integrating your reviews on Framer only requires adding a few lines of code onto your site. You don't need any specialist tools or a developer—just copy and paste!
Our Framer Integration
- Embed your widget to collect text and video testimonials
- Create a wall of love or testimonial page (ex: /wall-of-love)
- Display a testimonial slider or a single testimonial
- Automate your workflows with our zapier integrations
TL;DR
- Create an account on Testimonial.to and import your testimonials
- Create your Wall of Love or collecting widget
- Customize your widget and copy the HTML code
- Navigate to your Framer website
- Create a custom component
- Replace the sample link with your wall of love link in the component code
- Finally, ‘Publish’ and voila!
Your website is now ready to convert better with social proof 💪
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.
Step-by-Step 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 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! ✌️
