Documentation

Learn how to integrate Tapback into your application

Quick Start

Get up and running with Tapback in just a few minutes. Follow these steps to add microfeedback to your application.

1. Create a Widget

First, create a widget in your Tapback dashboard. Choose your question, emoji set, and customize the appearance to match your brand.

2. Get Your Embed Code

Copy the embed code from your widget settings. It will look something like this:

<script src="https://your-domain.com/widget.js" data-widget-id="your-widget-uuid"></script>

3. Add to Your Page

Paste the embed code into your HTML page where you want the widget to appear. The widget will automatically load and display your feedback form.

API Reference

Use our REST API to programmatically create widgets, collect reactions, and access analytics data.

Authentication

All API requests require authentication using your API key. Include it in the Authorization header:

Authorization: Bearer YOUR_API_KEY

Endpoints

Create Widget

POST /api/widgets

Create a new feedback widget

Submit Reaction

POST /api/reactions

Submit a reaction to a widget

Get Analytics

GET /api/widgets/{uuid}/analytics

Retrieve analytics data for a widget

Examples

Here are some common use cases and examples to help you get started.

React Integration

import { useEffect } from 'react';

function FeedbackWidget({ widgetId }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://your-domain.com/widget.js';
    script.setAttribute('data-widget-id', widgetId);
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
    };
  }, [widgetId]);

  return <div id="tapback-widget"></div>;
}

Vue.js Integration

<template>
  <div id="tapback-widget"></div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://your-domain.com/widget.js';
    script.setAttribute('data-widget-id', this.widgetId);
    document.body.appendChild(script);
  }
}
</script>