Partner Platform

Request Access

Overview

Getting Started

Widgets

Categories

Keywords

Reviews

Users

Businesses

Businesses Search

Negotiations

Messages

Requests

Help

Changelog

Terms and Policies

Pro List Widget

Learn how to integrate Thumbtack's Pro List onto your platform.

About

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

Setting Up

Usage:
  • The pro list will refresh when either category or zip code has been updated
  • The pro list will refresh only when a category is selected from the drop-down and not for the user-entered string
  • See more pros will take you to the entire pro list on https://www.thumbtack.com/
  • View profile will take you to the pro profile page on https://www.thumbtack.com/

Step 1

Determine the starting category_pk that you want the iframe to show.
Your contact at Thumbtack will provide you a mapping of category_pk => category_name.

Step 2

Construct your desired iframe URL based on the following configuration:
{{environment}}/embed/pro-list?category_pk={category_pk}&utm_source={utm_source}&utm_campaign={utm_campaign}&iframe_id={iframe_id}
Parameter
Description
Default Value
Valid Values
Required
category_pk
The ID of the category to show the Pro List for.
N/A
yes
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
yes
iframe_id
The id of the iframe that will embed the PLW.
Note that if you wish to render more than 1 iframe on a given page, each call to PLW must have a distinct iframe_id.
N/A
Can be any string
yes
zip_code
The initial zip_code to show Pros for.
IP-inferred
no
is_category_editable
Whether the category field can be edited.
true
[true, false]
no
is_zipcode_editable
Whether the zip code field can be edited.
true
[true, false]
no
limit
The maximum number of Pros displayed.
3
[1..10]
no
utm_content
Used to pass the experiment bucket (or something else).
N/A
Can be any string
no
utm_user_hash
The hash of the User on the Partner's platform.
N/A
Can be any string
no

Step 3

Test the iframe URL. 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 HTML to Your Website. Insert the following HTML code into the webpage where you want to embed the pro list. Ensure this code is placed at the exact location where the iframe is intended to be rendered (on the page/DOM).
<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 Pro List 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/pro-list.js" data-iframe-id="thumbtack-pro-list"></script>

Step 6

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.

On this page