In this article, you'll learn how to set up webhooks for interaction with your server for Web2App onboarding. Webhooks can send requests from any screen, accept parameters, receive and store responses, and transfer webhook data to the redirect URL or another webhook.

To add a webhook, open the Web2App link editing form.

In the Webhooks section, click +ADD.

Next, you need to configure the webhook following the instructions below:

Choose the type of webhook:

Screen Leave: Triggers when the user moves from one screen to another. You can specify a particular screen or set it for every screen.
Onboarding Finish: Sent when the user completes the entire onboarding and leaves the last screen.
Wait for Response: Only works on Slider or Progress bar screens to receive data from your server and use it in the redirect link. This type can collect webhook responses.

Choose the type of server request: Get or Post.

Enter the request URL to your server.

Set the flag "Send User Data":

True: Automatically sends all collected user data in the webhook request.
False: User data is not sent automatically, but you can specify and enable the sending of data from specific screens in the webhook request (as per the instructions below).

Example of using the 'send user data' flag

Imagine you have a Web2App onboarding in an app where users select their favorite book genres on different screens:

Screen 1: User selects favorite genres.
Screen 2: User selects favorite authors.
Screen 3: User enters their email

You created a webhook that sends after completing onboarding.

If you set 'Send User Data' to True:

The webhook will automatically include all user data collected from Screen 1, Screen 2, and Screen 3 in the request parameters.
The webhook request sent at the end of onboarding would look like this: https://yourserver.com/Webhook?screen1=Fantasy,Mystery&screen2=Orwell&[email protected].

If you set 'Send User Data' to False:

If you haven't specified screens from which to collect data and haven't set up sending data parameters in the webhook - the user-entered data will not be sent in the webhook.
If you have specified a particular screen and set up sending as per the instructions below - data collected from it will be sent in the webhook.
Suppose you want to send only the user's choice from Screen 2. The webhook would look like this: https://yourserver.com/genreSelectionWebhook?screen2=History,Biography.

Sett Up Screens to Call the Webhook

The settings of screens for calling the webhook vary for each type of webhook.

ScreenLeave: Check the box and select a specific screen. If the box is unchecked - the webhook will be sent as soon as the user leaves each screen.
Onboarding Finish: Sent after the last screen only (screen selection does not affect the operation of this type of webhook).
Wait for Response: You can choose the ID of a Slider or Progress bar screen.

Set up Webhook Headers (if needed)

If necessary, add headers (e.g., Authorization, Content-Type, etc.). To do this, click the Add button in the headers section of the Webhook settings.

Add the key and value of the header. Save the header by clicking ADD.

Add Webhook Request Parameters

You can send specific data to your server, like user input, Amplitude ID, etc. Detailed instructions on how to add request parameters can be found in the article.

Intercept Webhook Response Parameters (only for 'Wait for Response' type)

If you want to use data received by the server further (e.g., to send it to Redirect URL or another WebHook for segmentation or attribution), you need to set up the interception of the webhook response parameter.

Important before setting up the capture of response parameters:

Ensure that you have selected the 'Wait for Response' type in your webhook setup - only this type can wait for a server response and save parameters for subsequent transmission.
Set up the webhook fields as per the instructions above, including webhook URL, request type, headers, etc.

Then follow the instructions:

Click "+ADD" in the Response parameters section of the webhook.

In the 'Key' field, enter the exact name of the parameter you expect to receive from the webhook response (e.g., "createUserId").
Select the type of parameter (string, integer, or double) depending on the expected data format.
Click the ADD button to complete the interception and saving of the response parameter.

Don't forget to make sure that your server allows interaction with the onboarding domain!

Below is a clear step-by-step guide on how to add the **Access-Control-Allow-Origin** header to your server response:

1. Identify the relevant endpoint:

Determine or create the endpoint in your server code that handles webhook requests. For example, this might be `POST /webhook`.

2. Add the header to your response:

In the code that generates the HTTP response, include the header `Access-Control-Allow-Origin: custom.domain`.

For instance, in pseudo-code:

response.setHeader('Access-Control-Allow-Origin', 'custom.domain');

3. Ensure the header is set before sending the response:

If you are using a web framework or library (such as Express.js in Node.js), make sure to set the header before sending the response.

Example with Express:

   app.post('/webhook', (req, res) => {
     res.setHeader('Access-Control-Allow-Origin', 'custom.domain');
     res.send('OK');
   });

4. Test your configuration:

Use a tool like `curl` or Postman to send a test request to your server. Check the response headers to confirm that `Access-Control-Allow-Origin: custom.domain` is present.

5. Add additional CORS headers if necessary:

Depending on your needs, you may also have to set other CORS-related headers such as `Access-Control-Allow-Methods` or `Access-Control-Allow-Headers`. Add them in the same way:

   res.setHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

This ensures that your server explicitly allows requests from the specified domain (`custom.domain`) when handling webhook requests.

Then you can transfer this data to the Redirect URL or another WebHook