Saltar al contenido principal

Embedding delivery tracking page

If you want to embed the tracking page, please reach out to our team by emailing [email protected]

Background​

When embedding a third-party website URL to surface a delivery tracking page within a native mobile application, it's crucial to ensure a seamless and native-like user experience. Below are the design principles and development requirements that should be specified in the external scope of work for this component of the Merchant’s First Party Online Ordering app build.

Implementation Requirements​

  1. Responsiveness: The embedded page should be fully responsive, adapting to different screen sizes and orientations without compromising usability.
  2. Performance: Optimize the loading time of the embedded page to ensure it is fast and responsive, minimizing any delay after an order is placed.
  3. Accessibility: Ensure the embedded content is accessible to all users, including those with disabilities, by supporting VoiceOver and other accessibility features.
  4. User Feedback: Provide immediate feedback to users when the page is loading or if there are any errors in loading the content.
  5. Security: Ensure that the embedded page is secure, using HTTPS and other security measures to protect user data.
  6. Seamless Navigation: Ensure that navigation to and from the embedded page is smooth and intuitive, without disrupting the user's flow.

User experience should be consistent between the app and tracking page so that the user is unaware that they are being redirected to a webpage outside of the native app experience.

1. Unified Navigation Bar​

  • Design: Ensure that the navigation bar at the top of the embedded page matches the design of the native app's navigation bar. This includes using the same color scheme, font, and button styles.
  • Functionality: Include a back button or a close button that allows users to easily return to the previous screen or the main app interface.

2. Persistent Navigation Elements​

If your app uses a tab bar or a similar persistent navigation element, consider keeping it visible while the user is on the embedded page. This allows users to switch between different sections of the app without needing to navigate back to the main interface first.

Full Page Scrolling​

Users should be able to scroll through the entirety of the tracking page when it is embedded in your app experience.

  1. WebView Configuration:
    • Configure the WKWebView (iOS) and WebView (Android) to allow full-page scrolling without obstruction.
  2. Content Insets:
    • Adjust content insets appropriately so that the embedded page content does not get clipped by the navigation bar or any other persistent UI elements.
  3. Safe Area Considerations:
    • Ensure that the WebView respects the safe area insets, especially on devices with notches or rounded corners.
  4. Dynamic Content Size:
    • Handle dynamic content sizes by allowing the WebView to resize based on the content it loads.
  5. No Overlapping UI Elements:
    • Ensure that any floating buttons or overlays do not interfere with the user's ability to scroll.

Development Best Practices​

  1. WebView Integration:
    • iOS: Use Apple’s WKWebView.
    • Android: Use WebView for embedding web pages.
  2. Loading Indicator: The DoorDash embedded page will handle the loading indicator.
  3. URL Allow Listing: Ensure that only the specified third-party URL and its subdomains are accessible through the WebView.
  4. Caching Strategy: Implement an efficient caching strategy.
  5. Network Monitoring: Detect connectivity issues and provide appropriate feedback to the user.
  6. Testing and QA: Conduct thorough testing across different devices.
  7. Compliance and Privacy: Ensure compliance with relevant data protection regulations (e.g., GDPR, CCPA).
  8. Documentation: Provide comprehensive documentation detailing the integration process.

DoorDash Delivery Tracking URL​

After successfully creating a Delivery against DoorDash Drive Fulfillment APIs, you will parse the response in the API or in the webhooks to collect the delivery_tracking_url and use it to present the DoorDash Tracking Page to the consumer within your mobile/web online ordering application(s).

API Documentation:​

DoorDash API Docs

Example delivery_tracking_url:

http://drd.sh/d035NtWrk/

Map Only Implementation​

If you want to leverage just the map from the tracking page, add on the map_only=true query parameter in the URL.

Example:

https://track.doordash.com/order/bb910300-77d6-4ce0-8a6b-4f4cbd7bdc6b/track?map_only=true

iFrame Implementation​

Implementing an iframe within a mobile app can vary depending on the platform.

iOS (Swift)​

import WebKit

class ViewController: UIViewController {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        webView = WKWebView(frame: self.view.frame)
        self.view.addSubview(webView)

        if let url = URL(string: "https://example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
}

Android (Java/Kotlin)​

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://example.com");

React Native​

import React from 'react';
import { WebView } from 'react-native-webview';

const MyWebComponent = () => {
  return (
    <WebView source={{ uri: 'https://example.com' }} style={{ flex: 1 }} />
  );
};

export default MyWebComponent;

Flutter​

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("WebView Example")),
      body: WebView(
        initialUrl: 'https://example.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

Basic HTML Approach​

<iframe id="myIframe" width="600" height="400" style="border:1px solid black;"></iframe>
<script>
  document.getElementById("myIframe").src = "https://example.com";
</script>

Angular​

Angular Component (iframe.component.ts)​

import { Component } from '@angular/core';

@Component({
  selector: 'app-iframe',
  templateUrl: './iframe.component.html',
  styleUrls: ['./iframe.component.css']
})
export class IframeComponent {
  url: string = '';
}

Angular Template (iframe.component.html)​

<div>
  <iframe *ngIf="url" [src]="url" width="600" height="400" style="border: 1px solid black;"></iframe>
</div>