How to Embed a Widget

Ideanote Updated by Ideanote

Introduction

The Ideanote Idea Widget is a simplified version of the Ideanote Webapp and allows people to submit ideas in a step-by-step flow as well as browse ideas.

You can embed the Idea Widget in any website to provide your customers with Ideanote functionality such as idea and problem submission and browsing of ideas.

You can embed the widget in your website, webapp or mobile app.

Live example

You can choose to embed your widget in 3 different ways:

  • Launcher: Using a launcher button
  • Tile: Using an iFrame (like the above example)
  • Full-Screen: Using URL to directly link to your widget

How to add a widget to your website

  1. In your Workspace navigate to the mission you would like to embed.
  2. Click the Share button and chose Embed.
  3. Choose Launcher, Tile or Full-Screen as the type of Embed.
  4. Click Get the Code and copy the code to your clipboard.
  5. If you want to add the widget to your website, go to the web page where you want to add the widget, then paste the code before the closing HTML </body> tag. Add the code to every web page where you want the widget to appear.

iFrame Code Example

Here is an example of an Idea Widget Tile code snippet. It uses an HTML iframe tag and can be used anywhere on your website, webapp or mobile app.

  • You can define the width and height properties in pixels or percentage to fit your needs.
  • If you want to dynamically show specific missions to a specific audience you can generate a Tile code snippet for each mission. Unique to each widget code is the widget config id (e.g. f92d9611da in the snippet below).
<iframe
allowfullscreen
name="idea-widget-frame"
title="Idea Collection Widget"
style="border: none; width: 320px; height: 450px; box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); border-radius: 0px;"
frameborder="0"
src="https://idea-widget.ideanote.io?config=f92d9611da"
></iframe>

How to pre-authenticate the user using JWT

It's possible to pre-authenticate the user by adding URL parameters to the idea widget embed URL. The base URL looks like this: https://idea-widget.ideanote.io?config=f92d9611da and is obtained from either the Tile or Full-Screen embed method (see above guide).

Right now Ideanote only supports pre-authentication using JWT. The issued token must be added to the idea widget URL adding the URL parameter auth.jwt. The resulting URL will end up looking like this:

​https://idea-widget.ideanote.io?config=f92d9611da&auth.jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJlbWFpbCI6InJ1bmVAaWRlYW5vdGUuaW8ifQ.ng_ZBZlGWF2_Xy0VbwbK9WybiCsdpaWP-ToBhrCfkwA
JWT Structure

Ideanote expects the structure of the JWT payload to match the following:

  • sub: user ID in your system (required)
  • email: email of the user that you want to issue the JWT on behalf (required)
  • subdomain: the subdomain of your Ideanote workspace (required)
  • name: full name of the user (optional)
  • avatarUrl: an URL to the avatar of the user (optional)
  • department: The department the user works in (optional).
  • country: The country the user works in (optional)

How did we do?

Contact