Quick Start

Creating Your First Widget

This guide will walk you through the process of creating your first widget for the Giggle IPOS platform. By following these steps, you'll be able to set up a basic widget that can be embedded within IP portals.

Prerequisites

• A registered developer account on Giggle IPOS

• A hosted web application that will serve as your widget

• Basic understanding of iframe integration and API communication

Step 1: Access Widget Management

1. Log in to your Giggle IPOS developer account

2. Navigate to the Developer Center

3. Select "Widget" from the main menu

Step 2: Initiate Widget Creation

1. In the Widget Management dashboard, locate and click the "Create Widget" button in the top-right corner

Step 3: Complete the Widget Creation Form

Fill out the required information in the widget creation form:

Basic Information

1. Widget Name (required)

   • Enter a clear, descriptive name for your widget

   • Example: "Community Forum" or "NFT Gallery"

   • This name will be displayed in the Widget Store

2. Widget Type (required)

   • Select the category that best describes your widget's functionality:

     • Account: User profile and account management features

     • Finance: Financial tools, trading interfaces, portfolio trackers

     • AI: Artificial intelligence features, generative tools

     • NFTs: Non-fungible token related features

     • Other: Any widget that doesn't fit the above categories

3. Summary (required)

   • Write a brief description (max 150 characters) explaining what your widget does

   • This summary will be displayed in widget listings and search results

   • Focus on key benefits and features

4. Description (optional)

   • Provide a more detailed explanation of your widget's functionality

   • If left empty, the summary will be used instead

   • Include use cases and detailed feature descriptions

Technical Configuration

1. Widget URL (required)

   • Enter the public URL where your widget is hosted

   • Format: https://example.com/widgets/my-widget

   • This URL will be loaded in an iframe within the IP portal

   • Must be publicly accessible with proper CORS configuration

2. Management URL (required)

   • Enter the URL where IP holders can configure your widget

   • Format: https://example.com/widgets/my-widget/manage

   • This interface will only be accessible to IP holders who subscribe to your widget

   • Used for widget-specific settings and customization

3. GitHub URL (optional)

   • Link to your widget's code repository

   • Recommended for transparency and building trust

   • Format: https://github.com/username/widget-repository

Access Settings

1. Private Widget (optional)

   • Toggle to make your widget private during development

   • Private widgets are only visible to specified test users

   • Useful for testing before public release

2. Test Users (optional)

   • Add email addresses of users who can access your private widget

   • These users can test the widget before public release

   • Format: developer1

   • [email protected]

     

     Fill form

Step 4: Submit Your Widget

1. Review all information to ensure accuracy

2. Click the "Create Widget" button at the bottom of the form

3. Wait for the confirmation message indicating successful creation

Step 5: Find and Manage Your Widget

1. Once created, your widget will appear in your Widget Management dashboard

2. If set as private, only you and your test users can see it

3. If public, it will be visible in the Widget Store for all IP holders

You can manage widget here

example management page

Step 6: Implement Widget Communication

After creating your widget, you'll need to implement the necessary communication between your widget and the Giggle IPOS platform:

1. In your widget's frontend code, add an event listener for the PostMessage API:

window.addEventListener('message', (event) => {
  // Verify origin for security
  if (event.origin !== 'https://app.giggle.pro') return;
  
  // Handle authentication token
  if (event.data.type === 'access_token') {
    const accessToken = event.data.access_token;
    // Store the token securely for API requests
    // Use this token in future API calls
  }
});

// Notify parent when widget is fully loaded
window.parent.postMessage({ type: 'WIDGET_READY' }, '*');

1. In your management interface, implement similar code to receive the token when IP holders configure your widget.

Step 7: Test Your Widget

1. Navigate to your personal IP portal

2. Add your widget to test the integration

3. Verify that authentication works correctly

4. Test all widget functionality

Edit your portal

Enable widget at edit step 2

You can see widget content here

Next Steps

Congratulations! You've successfully created your first Giggle IPOS widget. Here's what you can do next:

• Enhance your widget with additional features

• Apply for featured status in the Widget Store

• Create documentation for IP holders

• Collect feedback and iterate on your design

For detailed API documentation and advanced widget development techniques, please refer to our comprehensive Developer Documentation.