Overview
Getting Started
Widgets
Categories
Keywords
Reviews
Users
Businesses
Businesses Search
Negotiations
Messages
Requests
Help
Changelog
Terms and Policies
Getting ready to utilize Widgets on your site.
We recognize that not all our Partners have the ability to undertake a full-fledged engineering effort to leverage all of our APIs. As such, we provide low-code solutions - which we call Widgets - that our Partners can leverage to render Thumbtack content on their platforms through an <iframe> component.
Widgets are only available on https:// domains. If you are using a http:// domain, you will need to work with your engineering team to set up a https:// domain.
Widgets are only available to domains that have been explicitly allowlisted by Thumbtack. If you are a new partner, please reach out to your Thumbtack contact to get your domain in the allowlist.
We allow incoming requests to embed Widget content by examining the HTTP Referer header and whether it is explicitly in our allowlist. This header is included in the request to the Widget based on an additional header: Referrer-Policy. This mechanism works in almost all cases, but can fail if your server is configured to set no-referrer as the header value. If your server is configured as such, please reach out to us.
If you receive an error of the form:
500 Internal Server Error
or
Refused to frame 'https://staging-partner.thumbtack.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
or
Refused to frame 'https://thumbtack.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
This can be caused by one the following issues:
- You are attempting to embed a production widget into your staging environment or vice versa (See Environments).
- The Referer header is not being included in the request.
- Your Referer is not in the allowlist on Thumbtack's side.
If you encounter this issue, ensure that your environment is making requests to the correct Thumbtack environment, and that the Referer header is being included in the request. Please reach out to us if you continue to encounter issues.
You can verify what Referer is being passed by opening up your website, opening Developer Tools, going to the Network Tab, and adding a filter for thumbtack.com/embed/. When you see a request made for a document that matches the filter, you will be able to see the Referrer-Policy and Referer headers. For an example of how Referer would look, see this image. Note that the value for the Referer header is redacted here, but its presence in the Request Headers is tied directly to Referrer-Policy.
If your website implements a strict CORS Policy (through the use of the Access-Control-Allow-Origin Header) and you are utilizing our staging environment, you may encounter an error of the form:
Access to XMLHttpRequest at 'https://staging-app.thumbtack.com/graphql' from origin 'https://staging-partner.thumbtack.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
In order to address this, ensure you have added staging-app.thumbtack.com to your CORS policy, not just staging-partner.thumbtack.com.