Widgets - On Demand - Thumbtack Partner Platform

Overview

Getting Started

Widgets

About

The On Demand Widget (ODW) allows you to render Thumbtack's On Demand flow directly on your platform. To play around with a live example of the ODW, kindly visit the ODW Playground.

Setting Up

Step 1

Construct your desired iframe URL based on the following configuration:

{{environment}}/embed/ondemand-request-flow?category_pk={{category_pk}}&utm_medium=partnership&utm_source={{utm_source}}&utm_campaign={{utm_campaign}}

All ODW parameters are listed below:

Parameter	Description	Default Value	Valid Values	Required
category_pk	The ID of the category you are searching in. Only certain categories are supported - see below.	N/A		yes
zip_code	The zip_code this Pro will be performing work in.	IP- inferred		no
utm_source	The utm_source assigned to your Partner account.	N/A		yes
utm_campaign	The utm_campaign you wish to utilize.	N/A	Can be any string	no
estimated_delivery_date	The estimated delivery date of the item for which the customer is booking a pro. The earliest date the pro should be booked is the following day. Must be less than 30 days into the future.	N/A	Format: YYYY-MM-DD	no
exit_button	Whether the exit button is shown.	true	[true, false]	no
auto_resize	Whether the iframe should automatically resize based on its contents.	true	[true, false]	no

Support Categories

CategoryPK	Category Name
122435952865247528	Carpet Cleaning
124317070955717033	Gutter Cleaning and Maintenance
109125193401647362	Handyman
152053870920155482	Home Inspection
219264413294461288	House Cleaning
150848602323501530	Junk Removal
122766917521637728	Lawn Mowing and Trimming
124317505632420266	Pressure Washing
152396937238036850	TV Mounting
122707076295909723	Window Cleaning

Step 2

Load the constructed URL in your preferred browser to ensure it displays the On Demand Flow correctly. If you encounter any issues, contact your Thumbtack representative for support.

Step 3

Add the following HTML to your site:

<iframe
    src="<url from STEP 1>"
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    height="600px"
    width=”632px”
/>

The Thumbtack On Demand Flow is responsive, so you can customize the width and height to fit your design needs.
You’ll want to also add some CSS to remove the border that comes with iframes by default.
This is why each of values within sandbox are needed:
- allow-scripts and allow-same-origin are needed for the iframe to load.
- allow-popups is needed so that users can click on important links such as our Terms & Conditions and have these links open in a new tab.
- allow-popups-to-escape-sandbox is needed so that the links that open in a new tab are not subject to the same restrictions as the iframe itself.

Step 4

Implement the following Event Listeners:

Event Name	Description
THUMBTACK_ODF_CLOSE	Emitted when this On Demand Flow is closed or “Got it” button is clicked.

Step 5

After completing the setup, reload your website and verify that the iframe is loading the On Demand Flow. Reach out to your Thumbtack representative for additional support.

Code Examples

React

useEffect(() => {
    const handleMessageEvent = (event: MessageEvent): void => {
        if (event.data === 'THUMBTACK_ODF_CLOSE') {
            setIsModalOpen(false);
        }
    };
    window.addEventListener('message', handleMessageEvent);
    return () => {
        window.removeEventListener('message', handleMessageEvent);
    };
}, []);

Swift / iOS Example (WKWebView Configuration)

func makeThumbtackWebView() -> WKWebView {
let configuration = WKWebViewConfiguration()
let userContentController = WKUserContentController()
let rfCloseScript = WKUserScript(
    source: """
    window.addEventListener('message', function(event) {
        if (event.data === 'THUMBTACK_ODF_CLOSE') {
            window.webkit.messageHandlers.rfClose.postMessage('close');
         }
    });
    """,
    injectionTime: .atDocumentEnd,
    forMainFrameOnly: false
)
userContentController.add(self, name: "rfClose")
userContentController.addUserScript(rfCloseScript)
configuration.userContentController = userContentController
let webView = WKWebView(frame: .zero, configuration: configuration)
var request = URLRequest(url: url)
// Set referer domain
request.setValue("<YOUR_DOMAIN>", forHTTPHeaderField: "Referer")
webView.load(request)
return webView
}
// Handle the close event, this is generally your UIViewController, or UIViewRepresentable.Coordinator.
extension MyMessageHandler: WKScriptMessageHandler {
    func userContentController(
        _ userContentController: WKUserContentController,
        didReceive message: WKScriptMessage
    ) {
        guard message.name == "rfClose" else { return }
        dismiss()
    }
}

On this page

About

Setting Up

Code Examples