The Raptive Community website carousel brings trending member conversations onto your site and gives readers a way to explore and join your Community. It shows member posts automatically; posts from your Creator Team are excluded.
Choose a location
Place the carousel where readers are already engaged with your content. We see the best results when it appears higher on the page, such as above or below a recipe or how-to card. Choose a placement that works across the page templates where you plan to show it.
Prepare your embed code
Open the Website Embed Code tool in your Raptive Community Creator Tools. Preview the carousel, then copy the code provided for your Community.
You'll need a way to insert HTML and JavaScript into your site. If someone else manages your website, send them the complete code and your chosen placement.
Implement and preview
Paste the complete embed code where you want the carousel to appear. Keep the embed div and script tag together, then save or publish your changes.
Open a live page and confirm the carousel loads in the intended location. Check it on desktop and mobile, and test more than one page if your site uses different templates.
Keep the functional code intact
Keep the script URL, data-community-slug value, and raptive-community-trending class unchanged. The size and spacing values in the embed div's style attribute can be adjusted after the carousel works.
Any method that renders the HTML and runs the JavaScript in the right page location can work. For WordPress, Genesis Simple Hooks and WPCode are two common options:
Genesis Simple Hooks
If your site uses the Genesis framework, you can add the carousel through a hook.
General steps:
- Open the Genesis Simple Hooks area in WordPress.
- Choose the hook that matches where you want the carousel to appear.
- Paste the embed code you copied from Creator Tools.
- Save your changes.
- Open a live page and confirm the placement looks right.
WPCode
If your site uses WPCode, you can add the carousel as a custom snippet.
General steps:
- Create a new custom snippet in WPCode.
- Paste the embed code you copied from Creator Tools.
- Choose the insertion method or location that best matches where you want the carousel to appear.
- Add any display rules needed for page targeting.
- Activate and Save the snippet.
- Open a live page and confirm the carousel appears where you expect.
Optional: adjust size and spacing
The embed div's style attribute contains display values such as height, max-width, margin, and padding. You may adjust width, margin, and padding to fit your site. We recommend maintaining the height at 400 px, the script URL, community slug, and carousel class to ensure your carousel displays correctly. Check the result on desktop and mobile.
Troubleshooting
The carousel doesn't appear
Make sure the embed code is placed in a rendered area of the page and has not been altered by the CMS, plugin, or theme.
Check data-community-slug in the embed div. Its value should match the slug at the end of your Community's web address, not the full URL. If it differs, copy the code again from the Website Embed Code tool.
Confirm the embed div still includes class="raptive-community-trending".
If the embed encounters an error, it will hide itself rather than display a broken element on your site.
If your Community has fewer than five member posts, the carousel may not appear. Posts must also be at least four hours old to be eligible.
The carousel appears twice
Check whether the same embed code was added through more than one method or inserted in more than one location on the same template.
The carousel appears on the wrong pages
Review your page targeting, hook logic, or template conditions to make sure the snippet is scoped correctly.
Spacing looks off
Check the surrounding theme layout and container styles. In some cases, the placement is correct, but the surrounding template adds extra spacing or width constraints.
Mobile layout looks wrong
Test the page on a mobile viewport and confirm the placement works within the responsive layout. Some placements that look fine on desktop may need adjustment on smaller screens.
I made a change and it’s not reflecting on my site
WordPress may have an older version of the carousel cached. Make sure to clear any caches to see the latest version on your site.
I want to remove the carousel
You can remove the carousel at any time by disabling or deleting the embed code from the method you used to inject it on your site. Clear any site caches.