For this integration we'll see how to use Make to request Doppio and redirect to a PDF in Webflow. The idea is to create a button in Webflow that users will be able to click to be redirected to a PDF.

Create a Make account

Register on Make.

Create a scenario

On Make, create an empty scenario.

Add a webhook trigger

Start by adding a webhook trigger to the scenario. You can find it by searching for "webhook" in the search bar and choose "Custom Webhook".

Next, add a hook to this webhook by selecting "Add".

Give your webhook a name.

And create a "Data structure" (to see this option make sure you checked the advanced settings)

Give your data structure a name and add an item in the "specification" section like below.

Add an HTTP request

Create a new HTTP module next to the webhook module you just created. You can find it by searching for "http" in the search bar and choose "Make a request".

Configure the HTTP module like in the image below

1. The URL of the Doppio API

2. The method of the request

3. The request authorization header (replace "[YOUR API KEY]" with your Doppio API key which you can find in your dashboard)

4. The type of data sent

5. The content type of data sent

6. The content of the request

7. Check "Yes" for the option to parse the request's response

In the "Request content", you can add the url by clicking in the text area and selecting the data "url" from the previous webhook module.

Add a response to the scenario

Your scenario should look like this

Now we'll add a new action to this scenario to return the url of the document generated.

Create a new "Webhook response" module next to the HTTP module you just created. You can find it by searching for "webhook" in the search bar and choose "Webhook response".

Right now, the HTTP module is missing the data structure of the request's response. We need to make a first call to the scenario for the HTTP module to know what data structure to expect.

First, you have to know which URL the scenario can be called on. To get this information, click on the webhook trigger (the first module created) and click on "Copy address to clipboard".

Now, you need to run the scenario by clicking on the "Run once" button.

Once, the scenario is waiting for a call. Open a new tab in your navigator and enter the URL of the scenario you got previously and add "?url=https://example.doppio.sh/information-booklet.html" at the end.

For example, in the scenario showed in this article, the URL would be :

https://hook.eu2.make.com/kxliqx5pk4r6rlwiw94vhd51n96s8jag?url=https://example.doppio.sh/information-booklet.html

Now, the HTTP module should know which data structure to expect as the request's response, allowing us to configure the "webhook response" module.

Configure the "webhook response" module so that it returns a 303 status and add an item in the "custom headers" section like the image below.

And there you have it !

You have created a Make scenario to generate a PDF out of a URL.

Now let's see the configuration on the webflow side.

Create a Webflow account

First, register on Webflow.

Create a Webflow site

Then create a new site in your dashboard and open the site in the designer interface of Webflow.

Create a button to display a page as a PDF

Create a button with Webflow

On this button, in the "links settings" section, add the URL to call the Make scenario you just created.

This is the URL you entered to determine the HTTP module request's response data structure.

For example, the URL for the Make scenario of this article is :

https://hook.eu2.make.com/kxliqx5pk4r6rlwiw94vhd51n96s8jag

The second part is the URL of the web page you want to display as PDF when a user clicks on the button. You are free to put any URL.

For example, if we would like to redirect the users to the example page provided by Doppio, we would add

?url=https://example.doppio.sh/information-booklet.html

The final URL to put on the button of Webflow would be :

https://hook.eu2.make.com/kxliqx5pk4r6rlwiw94vhd51n96s8jag?url=https://example.doppio.sh/information-booklet.html

You can try out the button by clicking on the play button on the top right of the webflow interface, and click on your button to be redirected to the PDF of the page you indicated in the URL.

What's next

In this article, we used Make to call Doppio and generate a PDF from a URL, and Webflow to integrate a button in a website to redirect users to a PDF.