Widgets - Service Page - Thumbtack Partner Platform

Overview

Getting Started

Widgets

About

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

Setting Up

Step 1

Make an API call to the /businesses/search endpoint to retrieve the widgets.servicePageURL for each Pro. The response from /businesses/search will contain a data key, which will contain as many Pros as are available (up to a limit of 30).

Step 2

The widgets.servicePageURL will be structured as follows:

{{environment}}/embed/service-page?category_pk={{category_pk}}&service_pk={{service_pk}}&utm_source={{utm_source}}&zip_code={{zip_code}}&iframe_id=REPLACE_THIS_ID_WITH_YOUR_IFRAME_ELEMENT_ID

You must replace iframe_id=REPLACE_THIS_ID_WITH_YOUR_IFRAME_ELEMENT_ID with the actual id of the iframe element you are using to render the SPW. Additionally, you can specify optional parameters to the SPW.

All SPW parameters are listed below:

Parameter	Description	Default Value	Valid Values	Required
category_pk	The ID of the category this Pro will perform work for in the SPW.	N/A		yes
service_pk	The ID of the Pro to show the SPW for.	N/A		yes
utm_source	The utm_source assigned to your Partner account.	N/A		yes
zip_code	The zip_code this Pro will be performing work in.	IP-inferred		yes
iframe_id	The id of the iframe that will embed the SPW. Note that if you wish to render more than 1 iframe on a given page, each call to SPW must have a distinct iframe_id.	N/A	Can be any string	yes
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

Step 3

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

Step 4

Add the following HTML to your site:

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

The Thumbtack Service Page 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 5

Place the following <script> tag at the bottom of your <body> section:

<script src="https://www.thumbtack.com/embed/service-page.js" data-iframe-id="thumbtack-service-page"></script>

Step 6

Implement the following Event Listeners:

Event Name	Description
THUMBTACK_RF_CLOSE	Emitted when the Request Flow spawned from inside the Service Page is closed or “Got it” button is clicked.
THUMBTACK_SP_CLOSE	Emitted when the Service Page’s exit (close) button is clicked. Note: an optional exit_button=false URL param can be added to the iframe URL to remove the close button.

Step 7

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

Code Examples

React

useEffect(() => {
    const handleMessageEvent = (event: MessageEvent): void => {
        if (event.data === 'THUMBTACK_SP_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_SP_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