Widgets - Events - Thumbtack Partner Platform

Overview

Getting Started

Widgets

About

All of our Widgets emit Events that you can listen to. These Events contain information about how Users interact with the Widget. To play around with a live example of these Events kindly visit the Widgets Playground.

Code Examples

React

useEffect(() => {
    const handleMessageEvent = (event: MessageEvent): void => {
        if (event.data === '<event name>') {
            <your logic here>
        }
    };

    window.addEventListener('message', handleMessageEvent);

    return () => {
        window.removeEventListener('message', handleMessageEvent);
    };
}, []);

Swift / iOS Example (WKWebView Configuration)

func makeThumbtackWebView() -> WKWebView {
    let configuration = WKWebViewConfiguration()
    let userContentController = WKUserContentController()
    
    let opScript = WKUserScript(
        source: """
        window.addEventListener('message', function(event) {
            if (event.data === '<event name>') {
                <your logic here>
             }
        });
        """,
        injectionTime: .atDocumentEnd,
        forMainFrameOnly: false
    )
    
    userContentController.add(self, name: "<name>")
    userContentController.addUserScript(opScript)
    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 == "<name>" else { return }
        dismiss()
    }
}

Widget	Events
Request Flow Widget	THUMBTACK_RF_REQUEST_CREATED THUMBTACK_RF_CLOSE
Pro List Widget	THUMBTACK_PL_SEARCH_RESULT THUMBTACK_PL_CLOSE THUMBTACK_SP_PRO_VIEW THUMBTACK_SP_CLOSE THUMBTACK_RF_START THUMBTACK_RF_REQUEST_CREATED THUMBTACK_RF_CLOSE
Service Page Widget	THUMBTACK_SP_PRO_VIEW THUMBTACK_SP_CLOSE THUMBTACK_RF_START THUMBTACK_RF_REQUEST_CREATED THUMBTACK_RF_CLOSE
On-Demand Widget	THUMBTACK_ODRF_CLOSE

THUMBTACK_RF_START

This event contains data when the Request Flow is started.

{
  "type": "THUMBTACK_RF_START",
  "data": {
    "category_pk": "<categoryID>",
    "zip_code": "<zipCode>",
    "business_pk": "<businessID>",
    "business_name": "<businessName>"
  }
}

THUMBTACK_RF_REQUEST_CREATED

This event contains data when the Request Flow is completed and a Request is created.

Your users can view their created Request on Thumbtack at https://staging-partner.thumbtack.com/search/results/<requestPK>/ or https://thumbtack.com/search/results/<requestPK>/, respectively (based on the Environment you are utilizing).

{
  "type": "THUMBTACK_RF_REQUEST_CREATED",
  "data": {
    "businesses_contacted": [
      {
        "business_pk": "<businessID>",
        "business_name": "<businessName>"
      },
      ...
    ],
    "category_pk": "<categoryID>",
    "zip_code": "<zipCode>",
    "user_pk": "<userID>",
    "created_at": <unix timestamp>,
    "is_existing_user": <true/false>,
    "search_id": "<searchID>",
    "request_pk": "<requestPK>"
  }
}

THUMBTACK_RF_CLOSE

This event is emitted when the Request Flow is closed via the X button, or via the Got it button.

{
  "type": "THUMBTACK_RF_CLOSE"
}

THUMBTACK_PL_SEARCH_RESULT

This event contains data when Search Results are returned in the Pro List.

{
  "type": "THUMBTACK_PL_SEARCH_RESULT",
  "data": {
    "category": "<categoryID>",
    "zip_code": "<zipCode>",
    "number_of_pros": <numberOfPros>
  }
}

THUMBTACK_PL_CLOSE

This event is emitted when the Pro List is closed.

{
  "type": "THUMBTACK_PL_CLOSE"
}

THUMBTACK_SP_PRO_VIEW

This event contains data when a Pro is viewed in the Service Page.

{
  "type": "THUMBTACK_SP_PRO_VIEW",
  "data": {
    "category_pk": "<categoryID>",
    "zip_code": "<zipCode>",
    "business_pk": "<businessID>",
    "business_name": "<businessName>"
  }
}