Embedding Individual Assets
Testimonials, Charts, and Stats
Open the Share Asset modal and copy the Embed Code from the bottom-left.
Paste the embed code onto any page where you want the asset to appear.
Style the embedded asset as needed to match your page layout
– Example: https://codepen.io/gammons-the-solid/pen/NWQoGjd
Case Studies
Embedding a Case Study is similar to other assets. Use the isEmbedded=true parameter to remove the UserEvidence top navigation for a seamless experience.
– Example: https://codepen.io/gammons-the-solid/pen/ogNdNPp
Microsites
Embedding a microsite is like embedding an individual asset — it’s just larger.
– Example: https://codepen.io/gammons-the-solid/pen/BaXMLow
Embedding a Research Library
All Research Libraries are embeddable. To embed a Research Library, use the special route:
https://app.userevidence.com/embedded-user-research-library/<company_name>
You can find the
company_nameat the end of the Research Library URL.
– Example: This Research Library URL:
https://app.userevidence.com/user-research-library/userevidence
has acompany_nameofuserevidence.
Developers can use this link to embed the Research Library onto a parent page.
– Example: https://codepen.io/gammons-the-solid/pen/xxoLYvz
Adjusting the Height
If embedded, UserEvidence will send the rendered height of the Research Library back to the parent iframe using the postMessage API. Expect that the height will be sent whenever the Research Library is finished rendering.
For example, this shows how the parent page uses the height directive:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parent Page</title> <style> /* Optional: Some styling to see the iframe behavior */ iframe { width: 100%; border: none; } </style> </head> <body> <!-- Embed the iframe --> <iframe id="myIframe" src="iframe-page.html"></iframe> <script> // Get a reference to the iframe element const iframe = document.getElementById('myIframe'); // Listen for messages from the iframe window.addEventListener('message', (event) => { // Security check: Ensure the message comes from the expected origin const expectedOrigin = '<https://userevidence.com>'; if (event.origin !== expectedOrigin) return; // Ensure the message has the expected structure and data if (event.data && event.data.height) { const newHeight = event.data.height; // Resize the iframe to the new height iframe.style.height = `${newHeight}px`; } }); </script> </body> </html>
Removing the Header
Add header=false to the URL parameter to remove the top header from the Research Library.
– Example: https://codepen.io/gammons-the-solid/pen/xxoLYvz