Documentation

Getting Started with TipPanel

This guide will help you get started with TipPanel, from setting up your account to creating your first widget and receiving payments.

Table of Contents
  1. Creating Your Account
  2. Dashboard Overview
  3. Creating Your First Campaign
  4. Customizing Your Widget
  5. Setting Up Payment Methods
  6. Embedding the Widget on Your Website
  7. Testing Your Widget
  8. Next Steps

Creating Your Account

To get started with TipPanel, you need to create an account:

  1. Visit the TipPanel website and click on "Sign Up" or "Get Started"
  2. Enter your email address and create a password
  3. Verify your email address by clicking the link sent to your inbox
  4. Complete your profile by adding your name and other required information
  5. Choose your subscription plan (you can start with the Free plan and upgrade later)
Tip: Make sure to use a strong password and keep your account information secure.

Dashboard Overview

After logging in, you'll be taken to your dashboard, which provides an overview of your account and widgets:

  • Top Navigation: Access to your profile, settings, and logout
  • Side Navigation: Access to all main features (Campaigns, Analytics, Moderation, etc.)
  • Dashboard Panels: Quick overview of key metrics (total campaigns, messages, conversion rate, etc.)
  • Recent Activity: Latest messages and transactions
Dashboard Features

The dashboard provides a quick overview of your TipPanel account, including:

  • Total number of campaigns
  • Total messages received
  • Conversion rate
  • Recent messages and transactions

Take some time to familiarize yourself with the dashboard layout and navigation before proceeding.

Creating Your First Campaign

A campaign in TipPanel represents a widget that you can embed on your website:

  1. Click on "Campaigns" in the side navigation
  2. Click the "Create Campaign" button
  3. Enter a name for your campaign (e.g., "My Blog Tips")
  4. Enter the domain where you'll embed the widget (e.g., "myblog.com")
  5. Choose the widget type (Floating or Inline, depending on your subscription plan)
  6. Click "Create" to save your campaign
Note: The Free plan only allows one campaign and the Floating widget type. Upgrade to a higher plan for more campaigns and widget types.

Customizing Your Widget

After creating your campaign, you'll want to customize your widget to match your website's design:

Steps to Customize Your Widget:
  1. From the Campaigns page, click on the "Appearance" button for your campaign
  2. Navigate to the "Theme" tab to customize colors and fonts
  3. Navigate to the "Layout" tab to set the widget position and size
  4. Navigate to the "Custom Text" tab to edit the text displayed in the widget
  5. Use the preview panel to see how your changes look in real-time
  6. Click "Save" to apply your changes
Customization Options

You can customize various aspects of your widget:

  • Theme: Colors, fonts, and overall look
  • Layout: Position, size, and behavior
  • Text: All text elements in the widget
  • Branding: Logo and branding options (Premium plans)
Tip: Match your widget's colors to your website's color scheme for a seamless integration.

Setting Up Payment Methods

To receive payments through your widget, you need to set up at least one payment method:

  1. Click on "Integrations" in the side navigation
  2. In the "Payment Integrations" section, click on "Configure" for either Stripe or PayPal
  3. Follow the instructions to connect your account:
    • For Stripe: Enter your API keys from your Stripe dashboard
    • For PayPal: Enter your Client ID and Secret from your PayPal developer dashboard
  4. Click "Test Connection" to verify your integration
  5. Click "Save" to apply your settings
Note: You'll need to create accounts with Stripe and/or PayPal separately before integrating them with TipPanel.

Embedding the Widget on Your Website

Once your widget is configured, you need to embed it on your website:

  1. From the Campaigns page, click on the "Embed Code" button for your campaign
  2. Copy the generated code snippet
  3. Paste the code into your website's HTML, just before the closing </body> tag
Embedding in Different Platforms

If you're using a content management system (CMS):

  • WordPress: Use a plugin like "Header and Footer Scripts" to add the code
  • Shopify: Add the code in the theme.liquid file
  • Wix: Add the code using the "Custom Code" feature
  • Squarespace: Add the code in the "Advanced" settings under "Code Injection"
Important: Make sure to add the code to all pages where you want the widget to appear.

Testing Your Widget

After embedding the widget on your website, you should test it to ensure everything is working correctly:

  1. Visit your website where you embedded the widget
  2. Click on the widget button (for floating widgets) or interact with the inline widget
  3. Submit a test message and payment
  4. Check your TipPanel dashboard to verify that the message and payment were received
  5. Test the moderation features by approving or rejecting the test message
Tip: Use the test mode in Stripe and PayPal to test payments without actual money transfers.

Next Steps

Now that you have your widget up and running, here are some next steps to consider:

Explore Analytics

Monitor your widget's performance and user engagement.

Learn More
Set Up Moderation

Configure moderation settings to manage incoming messages.

Learn More
Add Integrations

Connect with email marketing or automation platforms.

Learn More
Upgrade Your Plan

If you need more features, consider upgrading to a higher subscription plan.

Learn More
Back to Home Next: Campaigns