Documentation

The Destinely widget automatically displays local experiences to your guests right after they complete their hotel booking. It appears as a floating widget on your booking confirmation page, showing nearby approved experiences that guests can book instantly.

Widget Closed State

Widget Open State

How It Works

1. Guest completes hotel booking → Widget automatically appears on confirmation page
2. Widget fetches nearby experiences → Automatically queries approved experiences within 15km of your hotel
3. Guest browses and books → Seamless booking experience with instant payment processing
4. You earn commission → 5% commission on every completed booking

Step 1: Get Your Hotel ID

1. Log in to your Destinely hotel dashboard
2. Navigate to Widget Settings
3. Copy your unique Hotel ID

Step 2: Add Widget Code

Add this code to your booking confirmation page, just before the closing </body> tag:

<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = window.location.origin + "/api/widget/embed.js";
    js.setAttribute('data-hotel-id', 'YOUR_HOTEL_ID');
    js.setAttribute('data-position', 'bottom-right');
    js.setAttribute('data-trigger', 'booking-confirmation');
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'destinely-widget'));
</script>

Replace YOUR_HOTEL_ID with your actual Hotel ID from your dashboard.

Step 3: Test Your Widget

1. Complete a test booking on your website
2. Navigate to the booking confirmation page
3. Verify the Destinely widget appears
4. Test browsing and booking an experience

Standard HTML Integration

For standard HTML websites, add the widget script to your booking confirmation page:

<!-- Add before closing </body> tag -->
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = window.location.origin + "/api/widget/embed.js";
    js.setAttribute('data-hotel-id', 'YOUR_HOTEL_ID');
    js.setAttribute('data-position', 'bottom-right');
    js.setAttribute('data-trigger', 'booking-confirmation');
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'destinely-widget'));
</script>

Next.js Integration

For Next.js applications, use the Script component:

import Script from 'next/script'

export default function BookingConfirmation() {
  return (
    <>
      {/* Your booking confirmation content */}
      
      <Script
        src={
          typeof window !== 'undefined'
            ? window.location.origin + '/api/widget/embed.js'
            : '/api/widget/embed.js'
        }
        data-hotel-id="YOUR_HOTEL_ID"
        data-position="bottom-right"
        data-trigger="booking-confirmation"
      />
    </>
  )
}

React Integration

For React applications, add the script dynamically:

import { useEffect } from 'react'

export default function BookingConfirmation() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = window.location.origin + '/api/widget/embed.js'
    script.setAttribute('data-hotel-id', 'YOUR_HOTEL_ID')
    script.setAttribute('data-position', 'bottom-right')
    script.setAttribute('data-trigger', 'booking-confirmation')
    script.id = 'destinely-widget'
    
    if (!document.getElementById('destinely-widget')) {
      document.body.appendChild(script)
    }
    
    return () => {
      const existingScript = document.getElementById('destinely-widget')
      if (existingScript) {
        existingScript.remove()
      }
    }
  }, [])
  
  return <div>{/* Your booking confirmation content */}</div>
}

Step 1: Download the Plugin

1. Log in to your Destinely hotel dashboard
2. Navigate to Widget Settings → WordPress Plugin
3. Click Download Plugin
4. Save the ZIP file to your computer

Step 2: Install the Plugin

1. Log in to your WordPress admin panel
2. Go to Plugins → Add New
3. Click Upload Plugin
4. Choose the downloaded ZIP file
5. Click Install Now
6. After installation, click Activate Plugin

Step 3: Configure Settings

1. Go to Settings → Destinely Widget
2. Enter your Hotel ID (from your dashboard)
3. Enter your Hotel Name
4. Select widget position (recommended: Bottom Right)
5. Choose when to show widget (recommended: On Booking Confirmation)
6. Click Save Settings

Customize the widget appearance and behavior to match your brand. All settings can be configured through your hotel dashboard or via data attributes in the embed code.

Widget Booking Flow

Available Configuration Options

Track widget performance and guest engagement through your hotel dashboard. The widget automatically tracks interactions and bookings, providing real-time analytics.

How Experiences Are Fetched

When a guest opens the widget, it automatically calls the Destinely API to fetch nearby experiences:

The API returns experiences that meet all these criteria:

• Approved: Experience has been approved by platform administrators
• Active: Experience is currently active and available for booking
• Verified Provider: The experience provider has been verified
• Within Range: Experience is within 15km of your hotel location
• Sorted by Distance: Closest experiences appear first

Available Metrics

Your dashboard provides comprehensive analytics including:

Payment Schedule

Commission payments are processed monthly:

• Payments are processed by the 15th of each month
• Payments cover the previous month's bookings
• You'll receive detailed payment reports via email
• Track pending and completed payments in your dashboard

Widget Not Appearing

Possible causes:

• Incorrect Hotel ID - verify your Hotel ID in the dashboard
• Script not loaded - check browser console for errors
• Wrong page - ensure script is on booking confirmation page
• Ad blockers - some ad blockers may prevent widget loading

Solution: Verify your Hotel ID, check browser console, and ensure script is correctly placed.

Widget Appearing on Wrong Page

Solution: Update the data-trigger attribute or move the script to the correct page.

Styling Conflicts

Solution: The widget uses isolated CSS to prevent conflicts. If issues persist, contact support for custom CSS solutions.

Step 1: Create Your Account

1. Visit the Destinely website
2. Click Sign Up and select Experience Provider
3. Enter your email and create a password
4. Verify your email address
5. Complete your profile information

Step 2: Complete Business Information

Provide your business details:

• Business name and description
• Business address and location
• Contact information (email, phone)
• Business registration number (if applicable)
• Tax identification number
• Operating hours

Step 3: Upload Verification Documents

Upload required documents for verification:

• Business registration certificate
• Valid ID (National ID, Passport, or Driver's License)
• Business license (if applicable)
• Insurance certificate (if applicable)
• Any relevant permits or certifications

Step 4: Create Your First Experience

Once verified, you can start listing experiences:

1. Go to your provider dashboard
2. Click Create Experience
3. Fill in experience details (name, description, duration, price)
4. Upload high-quality photos
5. Set availability calendar
6. Submit for review

Experience Information

Required Information:

• Title: Clear, descriptive name (e.g., "Sunset Boat Cruise on Lake Victoria")
• Description: Detailed description of what guests will experience
• Duration: How long the experience lasts
• Price: Price per person or per group
• Location: Meeting point or pickup location
• Category: Select appropriate category (Tours, Activities, Food, etc.)
• Photos: At least 3 high-quality photos (recommended: 5-10)

Photo Guidelines

• Use high-resolution images (minimum 1200x800 pixels)
• First photo should be your best/most attractive image
• Show different aspects of the experience
• Include photos of actual participants enjoying the experience
• Avoid stock photos or generic images
• Ensure good lighting and clear focus

Pricing Strategy

Pricing Tips:

• Research competitor pricing in your area
• Consider your costs (materials, time, overhead)
• Factor in the total commission: 15% platform + 5% hotel = 20% total commission
• Offer competitive pricing while maintaining profitability
• Consider seasonal pricing for peak/off-peak periods
• Offer group discounts for larger bookings

Booking Notifications

You'll receive email notifications for:

• New bookings - When a guest books your experience (includes guest details, date, time, number of guests)
• Booking modifications - If guests request changes to their booking
• Booking cancellations - When guests cancel their bookings
• Payment confirmations - When payment is successfully processed

All notifications are sent via email and also appear in your provider dashboard.

Viewing Your Bookings

In your provider dashboard, you can:

• View all bookings for your experiences (upcoming and past)
• See booking details including guest information, date, time, and number of participants
• Access guest contact information for communication
• View payment status and your earnings breakdown
• Track booking history and performance metrics

Guest Communication

Best Practices:

• Respond to messages within 24 hours
• Provide clear meeting instructions
• Confirm details 24 hours before the experience
• Be professional and friendly in all communications
• Address any special requests or concerns

Commission Structure

For each booking:

• You receive: 80% of the booking value
• Platform commission: 15%
• Hotel commission: 5%

Payment Schedule

Provider payments are processed:

• Within 7-14 business days after the experience completion date
• Payments are sent to your registered bank account or mobile money
• You'll receive email notifications when payments are processed
• Track all payments in your provider dashboard

Optimize Your Listings

• Write compelling, detailed descriptions
• Use high-quality, authentic photos
• Highlight unique selling points
• Include clear meeting instructions
• Set competitive but profitable pricing

Maintain High Ratings

• Deliver experiences exactly as described
• Be punctual and professional
• Go above and beyond for guests
• Respond to reviews professionally
• Address any negative feedback promptly

Step 1: Book Your Hotel Room

After booking your hotel room, you'll see the Destinely widget on your booking confirmation page.

Step 2: Browse Experiences

Click on the Destinely widget to browse available local experiences:

• View curated experiences near your hotel
• Read descriptions and reviews
• Check prices and availability
• See photos and ratings

Step 3: Select an Experience

1. Click on an experience that interests you
2. Read the full description
3. Check available dates and times
4. Select your preferred date and time
5. Choose the number of participants

Step 4: Complete Booking

1. Enter your contact information - Name, email, and phone number (no account needed!)
2. Select date and time - Choose your preferred experience date and time slot
3. Choose number of guests - Select how many people will attend
4. Review booking details - Check all information is correct
5. Select payment method - Choose from credit card, debit card, or mobile money
6. Complete secure payment - Payment is processed securely through our payment partners
7. Receive confirmation - You'll receive a booking confirmation email with all details
8. Access your booking - A guest dashboard link is provided to manage your booking

Accessing Your Dashboard

After booking, you can access your guest dashboard:

• Click the dashboard link provided in your booking confirmation email
• Or visit the guest dashboard and sign in with your email
• If you forgot your password, use the "Forgot Password" link
• Your account is automatically created with the email you used for booking

Updating Your Profile

1. Log in to your guest dashboard
2. Go to Profile Settings
3. Update your information (name, email, phone)
4. Add a profile photo
5. Set your preferences
6. Save your changes

Viewing Your Bookings

In your dashboard, you can:

• View all your bookings (upcoming and past)
• See booking details and confirmation numbers
• Access meeting point information
• Contact experience providers
• Cancel or modify bookings (subject to policies)

Cancellation Policy

Cancellation policies vary by experience provider. Generally:

• 48+ hours before: Full refund minus processing fees
• 24-48 hours before: 50% refund
• Less than 24 hours: No refund (unless exceptional circumstances)

Check the specific cancellation policy when booking each experience.

How to Cancel

1. Log in to your guest dashboard
2. Go to My Bookings
3. Find the booking you want to cancel
4. Click Cancel Booking
5. Confirm your cancellation
6. Refund will be processed automatically (if applicable)

Accepted Payment Methods

We accept the following payment methods through our secure payment gateway:

• Credit Cards: Visa, Mastercard
• Debit Cards: All major debit cards
• Mobile Money: MTN Mobile Money, Airtel Money

Payment Process

1. Complete your booking details (date, time, number of guests, contact information)
2. Click "Complete Booking & Pay Securely"
3. You'll be redirected to our secure payment gateway
4. Select your preferred payment method
5. Complete payment securely
6. You'll be redirected back with booking confirmation
7. Receive confirmation email with all booking details

Secure Payment Processing

All payments are processed securely:

• PCI-compliant payment processing
• Encrypted payment information
• Secure payment gateways
• No payment information stored on our servers
• Payment is processed immediately upon completion
• Booking is automatically confirmed once payment is successful