This guide helps you integrate PeerBoard into your web application. It should work for any stack, but you may need to adjust it a bit. If you found a new way of integrating PeerBoard using this guide, we would like to hear about it and possibly work on a new guide together. Contact integrations@peerboard.com for questions or to share your custom implementation.
Create your PeerBoard
1. PeerBoard instance.
The first thing you need is the PeerBoard itself - if you don't have it yet, please visit PeerBoard website.
2. Credentials.
Go to your community Settings -> Hosting tab, select your integration type as Integration SDK and copy your Board ID and API Auth token so that you can use it later in your code.
3. Domain and a path
We need to know the domain and the path where your community will be located to prevent others from hosting it on their websites and to set correct links to posts and comments in email notifications.
You need to decide where your community will live. Let's assume that you want to show the community at yourapp.com/community page. Assuming that the Integration domain will be yourapp.com and the Path prefix will be /community. You may use anything you want like /discussions.
💡 Note that after setting a domain for your environment, you won't be able to access the community outside of your integration, we suggest to use https://peerbaord.com/dashboard to configure hosting in this case.
Show PeerBoard in your application
1. Routing configuration
To allow requests to any nested routes at the target page, your back-end infrastructure and/or front-end routing configuration should handle requests that match yourapp.com/community/** and display the page with the PeerBoard instance.
💡 For example opening https://yourapp.com/community/post/983123 should not throw 404 error.
For users who are not logged in, redirect them to the requested path after they log in to access the post.
2. Get our frontend SDK
Use a package to create a community component on your page and configure it with a set of options and hooks.
yarn add @peerboard/core
Or
npm install -s @peerboard/core
3. Display your community
Show the community in the desired HTML element when the page loads. If you are using a modern front-end framework, we suggest to do it on component mount.
https://gist.github.com/sentiens/8ee9a7498b18a5bb5c57bd3aa211d768
✔︎ Checklist
- Ensure that navigation is working properly. Test this by copying the URL of some post in the community and trying to open it in a new tab. If everything is implemented correctly, you should see the post. If something is not working or you don't see the post, check the front-end routing configuration section and make sure the path prefix is passed correctly.
- Also, check that the links in emails point to your integration. To do this, create a new user account in your production environment board and write a comment to the post created by your other account. You should receive a comment notification in your email. Open the post link from this notification and make sure it opens the correct path. If it doesn't work, check if you specified the correct Path prefix in PeerBoard hosting settings and double-check previous steps.
Example using React
https://github.com/PeerBoard/integration-examples/blob/master/React/PeerBoard.jsx
Feature Guides
Check our special guides for extra features, in order of importance:
- Seamless Sign-in For Embedded Scenarios. You can seamlessly authenticate your users into PeerBoard automatically when they open the board. This is a must have if you already have your registration system to remove any unnecessary friction.
- Replacing PeerBoard Profiles with Your Custom Profiles. Already have your profiles and want to use them across the board even in your integrated PeerBoard community?
- Best Practices When Using PeerBoard API. Key endpoints you want to be calling to keep important data in sync.
- Adding PeerBoard Content to Your Sitemap. Maximize search engines coverage for your community pages, making them easier to be found in Google, Bing, etc.
- Using SSR API for Better SEO and OpenGraph Previews. When community pages are served from your servers, content preview is provided by your backend. Use these APIs to provide the actual data.
- Adding Commenting to your Website Pages. Enrich other pages of your website with commenting functionality that links back to the main community hub. Check this guide on creating the most seamless commenting+community experience out there.
Final Notes
We hope this helps, and you have successfully managed to set it up. If you have any questions or would love to share the results, please email us at integrations@peerboard.com!