How To Embed a memoryKPR Story In Your App or Website

How To Embed a memoryKPR Story In Your App or Website

Is there anything more satisfying than creating the perfect marketing storyline for the perfect audience with the perfect purpose? But then you hit a snag—you want to gather authentic user-generated content without having your customers leave your website. Don't worry! At memoryKPR, not only do we love helping you craft your story, but we also excel at helping you share it effortlessly.

Embedding your story on your platform is just another way to connect with your audience and showcase your memories without having them go to a third-party website. Let's dive into the options and explore how you can seamlessly integrate memoryKPR stories into your site, enhancing your storytelling and engaging your audience like never before!

Transform Your Community

Schedule your free demo today and take the first step towards a more connected community.

Book a Demo

Ways to embed your memoryKPR story

Option 1: QR Code

So, you've just created a beautiful story on memoryKPR, and you want to share it quickly. Our QR codes are the easiest way to share your story with others. Each memoryKPR story comes with a unique QR code, making it easy for users to scan and view or contribute to the story.

  1. Download or Print the QR Code: Once your story is ready, download the associated QR code from the “Invite or Share” tab of your story.
  2. Display the QR Code: You can place this QR code anywhere—your website, social media, or even physical flyers. When users scan it, they’ll be taken directly to your memoryKPR story.

That’s literally it. This option is perfect for those who want a quick, no-fuss way to share their stories.

Option 2: Embed codes

If you're looking for a more integrated approach, memoryKPR offers several embedding options for your website: Contribute View and Slideshow View. These options allow you to embed various interactive features directly onto your website.

For both of these views, we first need to get the ID of your story, to do this, go to your memoryKPR story and look at the URL in your browser. Look for the values between the "/" characters that look similar to this: eddea9ab-263c-416b-b02f-3f56205018e5

This string of characters is the ID of your story.

Contribute View

screenshot of memorykpr contribute view embed
Example of Contribute View in modal

Want to invite your audience to add their own memories to your story? The Contribute View is your go-to. This embeds our memoryKPR uploader directly on your website for a seamless user experience.

  1. Use the Story ID you got from above to complete the contribute embedding URL

Copy that ID and paste it into the following URL, replacing the ID_HERE text:
https://memorykpr.com/external/ID_HERE/contribute/embed

  1. Add the Code to Your Website: Paste the code into the HTML of your website where you want the contribute view to appear.
<iframe src="URL_FROM_ABOVE" style="width: 100%; height: 576px;" allow="camera;microphone"></iframe>

Pro Tip: If you integrate the uploader in a modal on you website, there is an option to have it integrate nicely with our native buttons that’ll close out your modal. Simply add ?modal=true to the end of the contributeUrl. Then listen for the window message when the modal closes.

window.onmessage = (message): void => {
     if (message?.data?.closeModal) {
       this.modal.close();
     }
   };
  1. Engage Your Audience: Users can upload their photo, video, or text memories to your story without navigating away from your page.

Slideshow View

Screenshot of slideshow embed for memoryKPR story
Example of Slideshow View

Want to showcase all the memories in a visually appealing way? The Slideshow View is perfect.

  1. Use the Story ID you got from above to complete the slideshow embedding URL

Copy that ID and paste it into the following URL, replacing the ID_HERE text:
https://memorykpr.com/external/ID_HERE/slideshow/embed

  1. Insert the Slideshow: Place the embed code where you want the slideshow to appear on your website.
<iframe src="URL_FROM_ABOVE" style="width: 100%; height: 448px;"></iframe>

Pro Tips:

  • To disable autoplay on the slideshow add ?disableAutoplay=true to the end of the URL
  • To hide memory titles and descriptions add ?disableText=true to the end of the URL
  • To hide the text icon from the memories add ?disableTextIcon=true to the end of the URL

Note: To use multiple attributes, here is an example and order does not matter except that the ? must be the start and then the rest are separated by an &

<iframe 
src="https://memorykpr.com/external/STORY_ID/slideshow/embed?disableText=true&disableAutoplay=true" style="width: 100%; height: 448px;">
</iframe>
  1. Showcase Your Memories: The slideshow will automatically update with new contributions, providing a dynamic and interactive display

Option 3: API Integration

For those who want full control and customization, our API integration is the way to go. This option is ideal for developers looking to create a bespoke user experience using our backend.

  1. Contact MemoryKPR: Reach out to discuss custom pricing and obtain API access.
  2. Design Your Interface: Use the API to create a customized interface that fits seamlessly with your website or app.

The API also supports automatic linking and upgrading of user accounts, allowing you to offer our premium features, such as automated importing of hashtagged content and monetization, effortlessly.

Get started!

Embedding a memoryKPR story on your platform is a powerful way to engage your audience, gather user generated content, and share meaningful memories. Whether you opt for QR codes, embed codes, or API integration, each method offers unique benefits tailored to different needs. 

Start integrating memoryKPR today and transform the way you share stories with your community.

Transform Your Community

Schedule your free demo today and take the first step towards a more connected community.

Book a Demo