Hi Everyone, I'm the founder of ReviewNPrep.com, a digital platform to up-skill. If you are looking to integrate Peerboard on a non Wordpress, non SaaS based website site you can follow these steps. I'm using php with codeignitor. Hope you find it useful.
Prerequisite - You need to have access to the code base. If you do not have access to the source code, this might not be the solution you are looking for.
- First of all, configure the settings in your Peerboard settings. Two major settings here are the Path Prefix and External Login. There are steps mentioned here for that (Subheading - Create your PeerBoard). Please note that I didn't follow any development mode as stated in the guide. I thought it is not a good use of time as we can enable the link on the main site when everything is ready.
- The subheading "**Show PeerBoard in your application" **is the one that was tricky. So, I'm listing down all the steps that you need to take.
Based on your folder structure go to the routes and add routing code. Sample below
$route['forums'] = 'reviewnprep.com/forums'
Again based on your folder structure create a controller for login redirect. You can customize the code based on your needs.
public function peerboard_login(){
$temp = site_url('/forums');
$this->session->set_userdata('callback',$temp);
return redirect('login');
}
Create a function for Seamless SignOn that will have the payload. If you want PeerBoard to take care of the logins for you or use Magic Link, you can skip this step. IMO, we want users to have seamless experience without having to login again or get a link in their mailbox. If user is logged in, create a payload for PeerBoard to create logins behind the scene for them.
public function forums(){
$key = "your key here";
/** Pass data points to Peerboard for the fields you want them to store.
*We are passing email, and name. You can pass more fields as you seem fit. Check the API guide for field information.
*/
$fields = array('external_id'=>$this->session->userdata('user_id'),'email'=>$this->session->userdata('user_email'),'name'=>$this->session->userdata('user_name'));
$creds = array('v'=>'v1','fields'=>$fields);
/** This is the final payload that needs to be encrypted with jwt token */
$payload = array('creds'=>$creds);
/**
* We are using JWT as suggested in the seamless signon guide. If you do not have root access to your server, you can copy the libraries from jwt website. You can visit - [https://github.com/firebase/php-jwt](https://github.com/firebase/php-jwt)
*/
$jwt = JWT::encode($payload, $key);
$data['jwt'] = $jwt;
$this->load->view('web/forums',$data);
}
Finally, include the below code to your html frontend tags
<section>
<div class="container">
<div class="row">
<div class="your own css class">
<div id="community">
</div>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/@peerboard/core@0.0.7/dist/peerboard-core.umd.js"></script>
<script>
// Settings -> Hosting -> Path prefix
const prefix = "/forums";
// Settings -> Hosting -> Board ID
const boardId = "your boardId here";
// On the page you should have a <div id="community"></div> as a //placeholder shown above
const containerHTMLElement = document.getElementById('community');
const options = {
prefix,
// Recommended setting so that the forum container
// will always occupy all available space
// minHeight: window.innerHeight - <HEADER HEIGHT> - <FOOTER HEIGHT>,
minHeight: window.innerHeight,
// Update your page title according to the forum state
onTitleChanged: title =>
window.document.title = "Your app community: " + title,
onReady: () => {
// Here you can safely any loading indicators
},
onFail: () => {
// Show error to the user
},
<?php
if($this->session->userdata('user_id')){?>
// Insert JWT TOKEN generated in above code.
jwtToken: '<?= $jwt; ?>'
<?php } else { ?>
anon:true
<?php } ?>
};
PeerBoardSDK.createForum(boardId, containerHTMLElement, options);
</script>
This is it. Once you have coded this, you should be all set. Feel free to message me on this post if you have any questions. You can visit our website ReviewNPrep.com for the experience.