Embed your Portal

Looking to engage customers with your Product Portal? Embed it where they already spend time. It'll be even easier for them to upvote ideas you're considering, review features you've planned, and see what you've recently launched.

Steps

  1. On your Portal, select Share to ensure share settings are set to Private link or Public link. (Since we embed with iframes, it will be necessary to generate some kind of URL to point to your Portal.)
  2. From the Embed tab, copy & paste the HTML embed snippet into your application.

Embedded Portal configuration options

When you embed your Portal, you may want to customize its appearance so it matches your application. 

In addition to standard customizations (customize primary color, remove productboard branding) available in Portal settings, additional options are available for embedded Portals.

Remove logo from header

Use URL parameter hide_logo = 1:

<iframe src="https://portal.productboard.info/u99vquqlpsyckypjrmtbf3sj?hide_logo=1" frameborder="0"></iframe>

Remove entire header

Note: Users will still be able to submit a new idea if this option is enabled in Portal settings. The button will be relocated from the header if it's been hidden.

Use URL parameter hide_header=1:

<iframe src="https://portal.productboard.info/u99vquqlpsyckypjrmtbf3sj?hide_header=1" frameborder="0"></iframe>

Remove user avatar

This is only hidden for users authenticated by SSO (see below).

User identity verification

productboard requires users submitting feedback to verify their identities via email.
That's because feedback tends to be more valuable when you know who it's coming from. Plus, piercing the haze of anonymity tends to improve quality of feedback.

Single Sign-on (optional)

When using an embedded Portal, you can now automatically verify users' identities by authenticating them via SSO. Of course, this will only work if they're logged in to your application.

Note: When users are authenticated via SSO, their avatar will automatically be hidden on the embedded Portal, as it's assumed it may already be visible in your application.

Enable Portal SSO: Steps for your developer

1/ Obtain the private key: In productboard, on your Portal, select Share. On the Embed tab, copy the private key.

2/ When a user wants to use the Portal, send a request to your server to generate an SSO token using the snippet below.

  • Install a JWT library. (We use JSON Web Tokens to securely authenticate your users, but you can use whatever library best suits you.)
  • Generate tokens on your server using code similar to the example below.
var jwt = require('jsonwebtoken’);

var PrivateKey = 'YOUR_PRIVATE_KEY';

function createProductboardToken(user) {
   var userData = {
       email: user.email,
       id: user.id,
       name: user.name,
       company_name: user.company_name,
       company_domain: user.company_domain,
   };
   return jwt.sign(userData, PrivateKey, {algorithm: 'HS256'});
}

Mandatory iat claim:

  • Payloads must include an iat claim. Some libraries like the jsonwebtoken, cited above, generate it automatically. For other libraries, you may need to include it manually. (Tokens without the iat claim will be refused and the user will not be logged in.)

Optional exp claim:

  • All tokens expire after 12 hours from issuance (iat claim), but you may optionally include an exp claim in the payload specifying an earlier expiration time. For sessions longer than 12 hours, it will be necessary to regularly refresh the iframe with a new token. Users who interact with the Portal on an expired token (e.g. submit a vote) will need to confirm their identities by email before their feedback is logged.

3/ Pass the token back to your app and into our iframe, where productboard will use the token to authenticate your user:

<iframe src="https://portal.productboard.info/u99vquqlpsyckypjrmtbf3sj?token=TOKEN_YOU_GENERATED" frameborder="0"></iframe>

See also:

Did this answer your question?