🚀 White Label Widget - Production Integration

Widget Integration PRODUCTION

The widget will appear below. It's loaded via the production loader script which automatically points to the latest versioned widget file.

📋 Copy & Paste Integration Code

Use this code snippet to embed the widget in your website:

<!-- Widget containers -->
<div id="tn-app"></div>

<!-- Widget loader script with customization options -->
<script id="tn-script"
  src="https://tn.platfone.com/tn.js"
  data-name="Your Brand"
  data-logo="https://example.com/logo.png"
  data-background-color="#ffffff"
  data-text-color="#333333"
  data-button-color="#007bff">
</script>

That's it! Just add these lines to your HTML and the widget will be ready to use.

🎨 Customization Parameters

You can customize the widget appearance by modifying the data attributes:

• data-name - Your brand name displayed in the widget
• data-logo - URL to your logo image
• data-background-color - Widget background color (hex format)
• data-text-color - Text color (hex format)
• data-button-color - Button color (hex format)

🔧 Integration Details

• Loader URL: https://tn.platfone.com/tn.js
• Loader Cache TTL: 5 minutes (loader updates quickly)
• Widget Cache TTL: 30 days (versioned files, immutable)
• CDN: Cloudflare optimized
• Technology: Shadow DOM (isolated styles and scripts)

👨‍💻 Developer Events Guide

The widget dispatches CustomEvents to notify your application about user interactions and state changes. You can listen to these events to integrate the widget with your application logic.

📢 Available Events

The widget emits the following events:

• tn:widgetLoaded - Widget has finished loading
• tn:serviceSelected - User selected a service
  📦 Details: service
• tn:countrySelected - User selected a country
  📦 Details: country
• tn:startOrder - User initiated an order
  📦 Details: service, country
• tn:orderFailed - Order failed
  📦 Details: service, country, reason
• tn:numberReceived - Number was successfully received
  📦 Details: service, country
• tn:numberCancelled - Number was cancelled
  📦 Details: service, country
• tn:reportSent - Report was sent
• tn:addFundsStarted - User started adding funds
• tn:balanceAdded - Balance was added

🎯 Listening to Events

Recommended approach: Listen on the widget host element

<script>
  const host = document.getElementById('tn-app')
  host.addEventListener('tn:widgetLoaded', () => {
    console.log('Widget loaded')
  })
</script>

Alternative approach: Listen on the global window (with guard)

<script>
  window.addEventListener('tn:widgetLoaded', (e) => {
    if (e.target !== window) return
    console.log('Widget loaded (global)')
  })
</script>

📦 Example 1: Widget Loaded Event

Use this event to know when the widget is ready for user interaction.

<script>
  const host = document.getElementById('tn-app')

  host.addEventListener('tn:widgetLoaded', () => {
    console.log('✅ Widget is ready!')
    // Initialize your custom logic here
  })
</script>

📦 Example 2: Number Received Event

This event includes details data with information about the service and country.

<script>
  const host = document.getElementById('tn-app')

  host.addEventListener('tn:numberReceived', (event) => {
    // Type: CustomEvent<{ service: string, country: string }>
    const { service, country } = event.detail

    console.log(`📱 Number received for service: ${service}, country: ${country}`)

    // Track in your analytics
    // gtag('event', 'number_received', { service, country })
  })
</script>