Learn how to embed testimonial widgets on Webflow, WordPress, Shopify, and Framer with this step-by-step guide. Add customer testimonials to your website in minutes using no-code methods, improve social proof, and boost conversions with auto-updating testimonial displays.
Why Embedding Matters More Than Collecting
Most conversations about testimonial marketing focus on collection — how to ask, when to ask, how to make it easy for customers to respond. Collection is important, but it is not the value-creation step. The value-creation step is distribution: getting your testimonials in front of prospects at the exact moments they need to see them to make a conversion decision.
The challenge of distribution is that websites are not static documents. Your testimonial library grows over time. Your best customers submit new testimonials every month. Your product evolves and you need testimonials that reflect the current version of your offering. A distribution system that requires a developer to update every time you want to change which testimonials are displayed is not sustainable — it creates a bottleneck that guarantees your social proof falls behind your actual library.
Gridapps testimonial widgets solve this by creating a live connection between your testimonial library and your website. The widget is a small snippet of code that, when embedded, renders your approved testimonials in a styled, responsive layout and updates automatically whenever you approve new testimonials or change display settings. No developer required. No file uploads. No page republication. The website simply reflects your library in real time.
FEATURED Q&A What is a testimonial widget and how does it work? A testimonial widget is an embeddable piece of code — typically a JavaScript snippet or iframe — that displays customer testimonials on a website. When a page loads, the widget's script makes a request to the testimonial platform's API (such as Gridapps) and retrieves the approved testimonials configured for that widget. These are rendered in a pre-styled, responsive layout using CSS that adapts to your site's width and design context. Because the testimonials are stored on the platform rather than hardcoded in your website, they update automatically when you add, approve, or change testimonials — no changes to your website required. |
Before You Embed: Generating Your Widget Code in Gridapps
Regardless of which website platform you use, the starting point is always generating your embed code in Gridapps. Here's the process:
Log into your Gridapps dashboard and navigate to the Widgets section.
Choose your widget type: Wall of Love (full library display), Featured Testimonial (single highlighted testimonial), Carousel (rotating selection), or Marquee (scrolling strip).
Configure the widget: select which testimonials to include (all approved, or filtered by tag/category), choose your layout settings, apply your brand colors and typography, and set the display options (number of testimonials visible, star rating display, customer photo visibility).
Preview the widget using Gridapps' live preview feature — you'll see exactly how it will appear on a light or dark background.
Click 'Get Embed Code.' You'll receive a snippet that looks like: <script src='https://gridapps.ai/widget/[your-id].js'></script> — copy this.
This snippet is now your live widget. Everything that follows is simply about where and how to paste it into each platform.
Embedding on Webflow
Webflow's embed element system makes adding external widgets clean and straightforward. Here's the complete process:
Method A: Using an Embed Element (Recommended)
In your Webflow project, open the Pages panel and navigate to the page where you want the testimonials to appear.
In the left panel, click the Add (+) button to open the element library.
Scroll to or search for 'Embed' in the element library. Drag the Embed element to your desired position on the canvas — typically within a Section element that you've created specifically for testimonials.
Click the Embed element to select it, then click the settings gear or double-click to open the HTML Embed Code Editor.
Paste your Gridapps widget snippet into the code editor.
Click 'Save & Close.' The element will display a placeholder in the Webflow editor, but the live widget will render correctly when published.
Click Publish to push your changes live. Your testimonials will appear immediately.
Method B: Adding to a Page's Custom Code
If you want the widget to appear consistently across multiple pages without adding an embed element to each one individually, you can add the Gridapps script to your page's custom code section:
In Webflow, go to Pages and open the settings for the target page.
Scroll to the 'Custom Code' section at the bottom of the page settings panel.
Paste your Gridapps widget snippet in the 'Before </body> tag' field.
Add a standard HTML div element with your widget's target ID to the page where you want the widget to render.
Publish the page.
Webflow Tip: Place your Gridapps embed element inside a Section with 80px or more of vertical padding for optimal visual breathing room. The widget respects the Section's width constraints automatically — it won't overflow your layout. For best results, set the Section's maximum width to match your site's content width (typically 1200px). |
Embedding on WordPress
WordPress supports Gridapps testimonial widgets in multiple ways depending on how your site is built. Here are the three most common configurations:
Method A: The Custom HTML Block (Gutenberg — Works Everywhere)
This is the simplest approach and works on any WordPress site that uses the Gutenberg block editor, regardless of your theme.
Open the page or post where you want testimonials to appear in the block editor.
Click the + button to add a new block. Search for 'Custom HTML' in the block search.
Add the Custom HTML block to your page in the desired position.
Paste your Gridapps widget snippet directly into the Custom HTML block's code input area.
Click Preview to verify the widget renders correctly, then Update or Publish.
Method B: Elementor Page Builder
If your site uses Elementor:
Open your page in the Elementor editor.
From the Elementor widget panel, drag an HTML widget to your desired section and column.
In the HTML widget's settings, paste your Gridapps snippet into the HTML field.
Click Update. The widget renders live in the Elementor preview canvas.
Method C: Divi Page Builder
For Divi users:
Open your page in Divi's Visual Builder.
Add a new row and insert a Code module.
Paste your Gridapps snippet into the Code module's content field.
Save and publish.
Method D: Adding to Theme Templates (For Site-Wide or Product Page Placement)
For advanced use cases, like adding testimonials to every product page in a WooCommerce store, or adding a testimonials strip to every page's footer, you can add the Gridapps snippet directly to your theme's template files using WordPress hooks. Add the snippet via the wp_footer action hook in your functions.php file, then use CSS or a div ID to control where it renders. Note: this method requires basic PHP familiarity and is best done by a developer or with a child theme to prevent your customizations from being overwritten during theme updates.
Embedding on Shopify
Shopify's Online Store editor has become significantly more flexible with modern themes, and adding Gridapps widgets is now a genuinely no-code operation for most store owners.
Method A: Using the Theme Customizer (Dawn and Modern Themes)
In your Shopify admin, go to Online Store → Themes and click 'Customize' on your active theme.
Navigate to the page where you want to add testimonials (homepage, product page, about page, etc.).
Click 'Add section' in the sidebar. Search for 'Custom Liquid' or 'HTML' — this section type is available in Dawn and most modern Shopify themes.
Once the Custom Liquid section is added, click on it to open its settings. You'll see a code input field.
Paste your Gridapps snippet into the code field.
Use the drag handle in the section list to position the testimonials section where you want it on the page.
Click 'Save' and then 'View' to see the live result.
Method B: Adding to Product Page Templates
For adding testimonials to individual product pages, you have two options. The first is using the section approach above on each product page template in the customizer. The second is editing your product.liquid (or main-product.liquid in newer themes) template file directly to include the Gridapps snippet at the desired position. The second approach applies the testimonials universally to all products and requires accessing your theme code via Online Store → Themes → Edit Code.
Shopify Conversion Tip: For product pages specifically, place your Gridapps testimonials widget below the product description and above the related products section. This positioning places social proof at the exact moment of purchase consideration — after the visitor has read your product description and before they scroll away. This placement consistently produces higher add-to-cart rates than testimonials placed below related products. |
Embedding on Framer
Framer has become one of the most popular platforms for marketing sites, and its embed component system makes adding Gridapps widgets seamless.
Using the Embed Component
Open your Framer project and navigate to the canvas for the page you're editing.
Go to Insert → Embed, or search for 'Embed' in the component panel. Framer's Embed component is designed exactly for this purpose — wrapping external code snippets in a properly scoped container.
Drag the Embed component to your desired position on the canvas.
In the right panel, click the 'Edit Code' option in the Embed component's properties.
Paste your Gridapps snippet into the code editor.
Set the height of the Embed component. For full-page Wall of Love displays, you may want to set this to 'auto' or a specific pixel value that accommodates your widget's full content height. For marquee strips, a fixed height of 160–200px works well.
Click outside the editor to save, then use Framer's Preview mode to verify the widget renders correctly.
Publish your Framer site.
Tips Specific to Framer
Framer renders Embed components both in preview mode and in the published site, which means you can verify your testimonials look correct before going live. If the widget doesn't render in preview mode, check that you've granted the Framer preview window permission to load external scripts from Gridapps' domain.
For Framer sites that use CMS collections for multiple similar pages (e.g., product pages or service pages), you can set up a single Embed component in your CMS collection template and all pages built from that template will automatically include the testimonials widget.
Widget Layout Options and When to Use Each
Layout Type | Best Placement | Best Use Case | Responsive? |
Masonry Grid | Dedicated testimonials page | Maximum volume impression, research-stage visitors | ✓ Yes |
Carousel/Slider | Homepage sections, feature pages | Limited space, curated rotation of top testimonials | ✓ Yes |
Marquee Strip | Below hero, above fold | Fast credibility signal, breadth of customer base | ✓ Yes |
Single Featured | Adjacent to CTA, pricing page | Deep-focus proof at the decision moment | ✓ Yes |
Video Wall | Product pages, case study pages | Video-first environments, high-engagement contexts | ✓ Yes |
Troubleshooting Common Embedding Issues
Widget Not Rendering
If your Gridapps widget isn't appearing on your published page, the most common causes are: the snippet was pasted in a location where scripts are blocked (some CMS platforms have script security restrictions), the widget ID in the snippet is incorrect, or the page's Content Security Policy is blocking external script sources. Gridapps' support documentation includes a CSP configuration guide for each major platform.
Widget Renders But Looks Off-Brand
Return to Gridapps' widget configuration and adjust your color settings to match your brand palette. Gridapps also provides CSS override options for advanced customization, if you need to match a very specific design system, you can add custom CSS rules that target Gridapps widget elements.
Widget Loads Slowly
Gridapps widgets are designed to load asynchronously; they don't block your page's main content from rendering. If you're experiencing slow load times, check your browser's network panel to confirm the widget script is loading asynchronously. If not, contact Gridapps support with your widget configuration details.
Measuring the Performance of Your Embedded Widget
Once your widget is live, use your analytics platform to measure its impact. Key metrics: scroll depth (what percentage of visitors reach the widget?), engagement rate (clicks on testimonial cards, video plays), and conversion rate comparison between sessions where the widget was visible and those where it was not.
Google Tag Manager can be used to fire events when visitors interact with your Gridapps widget, scrolling it into view, clicking a testimonial card, or playing a video. These events can be tracked in Google Analytics 4 as engagement metrics and connected to conversion goals to directly attribute revenue influence to your testimonial program.
