Developers

Integrate Tipoff

Add feedback collection to your site in minutes — use our drop-in script, mount the pre-built widget from npm, or design your own UI with the SDK.

This is what your visitors see

The ready-made widget gives you a floating launcher and polished feedback form out of the box — no design or build work required.

Sign in to copy your public key and campaign ID, or replace the placeholders below. Get started

Ready-made web widget (recommended)Show

Drop a single script tag on your site — no build step required.

Paste this snippet before the closing </body> tag in your site's HTML (for example index.html or your main layout template). The widget loads asynchronously and renders the feedback launcher shown above in the corner of the page.

Copy and paste as-is. The script loads from Tipoff's CDN (https://cdn.tipoff.se/widget/widget.v1.js) and sends feedback to https://api.tipoff.se. You do not host the widget yourself — the same URLs work for every customer.

pk_your_public_key
camp_your_campaign_id

Starts with camp_. Use the campaign you selected above — the ID updates when you change the selection.

<script
  src="https://cdn.tipoff.se/widget/widget.v1.js"
  data-key="pk_your_public_key"
  data-campaign="camp_your_campaign_id"
  data-api-url="https://api.tipoff.se"
  async
></script>

Script attributes

data-key
Your workspace public key (pk_...) — copy from above
data-campaign
Campaign ID (camp_...) — copy from above
data-api-url
API base URL — always https://api.tipoff.se for live sites
data-position
Optional: bottom-right (default) or bottom-left
data-hide-branding
Optional: set to true to hide the “Powered by Tipoff” badge. Pro plan only — ignored on other plans.
src
Widget script on Tipoff's CDN — https://cdn.tipoff.se/widget/widget.v1.js

Testing before you ship? Use Open widget preview on the Install page — no need to paste into another app. If you are developing locally and want to try the script tag on localhost, use http://localhost:3000/widget/widget.v1.js for src and http://localhost:3000 for data-api-url with pnpm dev running (the dev server proxies widget and API requests).

Pre-built widget in your bundleShow

Same look as above, mounted from your own app with npm.

Prefer the default UI but want to control when and where it mounts? Install @tipoff/widget instead of the script tag.

npm install @tipoff/widget

import { TipoffWidget } from "@tipoff/widget";

const widget = new TipoffWidget({
  key: "pk_your_public_key",
  campaignId: "camp_your_campaign_id",
  apiUrl: "https://api.tipoff.se",
  position: "bottom-right",
  // Pro plan only — ignored on other plans:
  // hideBranding: true,
});

await widget.mount();
Build your own custom widgetShow

Design your own feedback UI with the SDK while Tipoff handles the rest.

Use @tipoff/sdk in React, Vue, Svelte, or any frontend framework to design your own feedback UI while Tipoff handles campaign config and submission.

npm install @tipoff/sdk
import { Tipoff } from "@tipoff/sdk";

const tipoff = new Tipoff({
  key: "pk_your_public_key",
  baseUrl: "https://api.tipoff.se",
});

// Fetch campaign config (questions, discount, status)
const campaign = await tipoff.getCampaign("camp_your_campaign_id");

// Submit feedback from your own UI
await tipoff.submitFeedback({
  campaignId: "camp_your_campaign_id",
  answers: campaign.questions.map((q) => ({
    questionId: q.id,
    value: q.type === "rating" ? "5" : "Your feedback here",
  })),
  metadata: {
    pageUrl: window.location.href,
    userAgent: navigator.userAgent,
  },
});

API reference

All requests require the X-Tipoff-Key header set to your public key.

GET /v1/campaigns/:campaignId
Returns campaign name, status, questions, and optional discount code. Only active campaigns accept submissions.
POST /v1/feedback
Body: { campaignId, answers: [{ questionId, value }], metadata? }. Returns the created submission.