Get mockup action

This manual will demonstrate you on how to use the Flows feature of WP Webhooks to create an automation workflow (with multiple actions) directly on your WordPress website in combination with the Get mockup action.

To get started, we will walk you through each step from the beginning to the end so that you can make sure your endpoint will work as expected.

Required plugins/services

In order to use this webhook action, you need to make sure you installed and activated the following plugins, or have an active account with the given service:

• WP Webhooks
• ProjectHuddle

1. Setup a Flow

To get started, please login into your WordPress website, navigate to your WordPress dashboard > WP Webhooks > Flows and open/create a Flow of your choice. If everything is ready, please follow the steps down below:

1. Add a trigger of your choice, configure it and continue the process. If you are unsure about how to do that, feel free to check out this manual.
2. If you plan on connecting this trigger with other services such as Zapier, Make (Integromat), IFTTT, Zoho Flows, etc. You can select those integrations from the trigger dropdown. If you want to learn more about our third-party integrations, feel free to take a look at our third-party integration page.

2. Add and configure the action

1. Add a new action within the Flow, select the ProjectHuddle integration, and choose the Get mockup action.
2. After you selected the action as described above, it is time to configure the settings. If you don't feel completely familar with the layout of the Flow, you can read more about the basic setup of a Flow via the following helpfile.
3. Within those "Action Settings", you will see a list of all available arguments for the Get mockup action and further information about what the argument is about.
   
4. As seen in the example screenshot above, you can add multiple arguments. Each of those arguments has a different purpose and allows you to customize the data that will be sent. To see a full list, simply scroll down on this page to the argument list.
5. After that's done, simply continue the Flow action and test it. If everything works fine, you will get a successful response from the webhok call and everything was set up correctly. Within this Flow, you can also use all of the response values from the action call as parameters within the following actions.
6. Set the Flow status to active and save the flow.
7. In case of an error, please check its message for further information. We do also maintain a list of common error which you will find here.

3. Summary

If you followed all the steps above, your Flow will now send data based on its given trigger to the Get mockup action with the custom arguments you set up.
In case you want to learn more about this setup and others, please visit our documentation.

This manual will demonstrate you on how to set up a direct connection between the Get mockup action (to receive data) and your chosen service (to send data to this action).

To get started, we will walk you through each step from the beginning to the end so that you can make sure your endpoint will work as expected.

Required plugins/services

In order to use this webhook action within a direct connection, you need to make sure you installed and activated the following plugins, and/or have a valid account with the given service:

• WP Webhooks
• ProjectHuddle

1. Setup WP Webhooks

To get started with WP Webhooks, simply download the latest version from your account dashboard and install/activate it on your WordPress website. If you want to lean more about the installation process of the plugin itself, please check out this manual.

2. Integrate the action with your service

In order to send data from your service to the Get mockup action, you need to provide an URL to your service so that it can send information over to WP Webhooks.
As we provide automatically such receiving webhook URLs, you can simply copy it from within WP Webhooks.

1. Please head over to your WordPress dashboard > WP Webhooks > Receive Data > Get mockup and create/copy a webhook URL of your choice.
2. Once you copied the URL, please locate the possibility to send data within your external service (this could be a webhook endpoint, API integration, etc.), or an automation service such as Zapier, Make (Integromat), Zoho Flows, n8n, etc (Click here to see a list of all available third-party integrations).
3. After that, you can add the copied URL from the "Receive Data" tab into the specified field of your service.

What we have accomplished so far: At this stage, your external service is already able to send data to your WordPress website via the previously generated URL. By default, our plugin can detect (and accepts) various Content-Types such as JSON and XML. We also suggest sending the requests as a POST request.

3. Set up Data Mapping

While the above connection can aleady transer data from your service to the Get mockup action, it won't do much as in most cases the data sent from your service has a different format than what WP Webhooks requires.
To solve that, we offer a feature called Data Mapping. This allows you to automatically alter and map the incoming data from your service to map its values to the required arguments from WP Webhooks.
This feature allows you to do various mapping possibilities, create new values and manipulate existing ones. To show you this feature in a practical way, down below is a short manual on how you can set up the data mapping template:

Set up a Data Mapping template

1. Go to your WordPress dashboard > Settings > WP Webhooks > Data Mapping and add a new Data Mapping template.
2. Within it, you can add your mapping data that adjusts the data sent by your service to the arguments required by WP Webhooks.
3. Lastly, you need to connect the Data Mapping template to the receiving URL you selected in step 1 (Setup your Webhooks). To do that, please head over to your WordPress dashboard > WP Webhooks > Receive Data and open the Setting of the specific webhook URL. There you will find a setting called Add request data mapping template - simply select your your Data Mapping template from the dropdown and save it.
4. That's it. Now all data sent from your service will be validated by the data mapping template. To learn more about it, please check out our documentation for Data Mapping templates.

Configure the Data Mapping template
Now it is up to you what data you want to send in wich way to the Get mockup action. As for most of our actions, we offer something called Arguments which are similar to variables that you can use to assign data to a purpose.
Below this box you will find a list of all available action arguments for the Get mockup action. Click here to jump direclty to it.

1. Go to your WordPress dashboard > WP Webhooks > Data Mapping and open the data mapping template you created in the previous step.
2. Within it, you can create your mapping based on the arguments from the argument list. Once you add a new row, you can add the argument into the left field.
3. On the right you can add keys to map the data based on the data that was sent by your service. To learn more about the mapping, please check out this helpfile.
4. Down below you will find a data mapping template example that shows a simple configuration on how to use it to manipulate values.
   

   {"template_settings":{"wpwhpro_data_mapping_whitelist_payload":"none"},"template_data":[{"new_key":"static_first_name","singles":["{\"settings\":{\"wpwhpro_data_mapping_value_type\":\"data_value\",\"wpwhpro_data_mapping_convert_data\":\"none\",\"wpwhpro_data_mapping_decode_data\":\"none\",\"wpwhpro_data_mapping_fallback_value\":\"\"},\"value\":\"Jon\"}"]},{"new_key":"static_last_name","singles":["{\"settings\":{\"wpwhpro_data_mapping_value_type\":\"data_value\",\"wpwhpro_data_mapping_convert_data\":\"none\",\"wpwhpro_data_mapping_decode_data\":\"none\",\"wpwhpro_data_mapping_fallback_value\":\"\"},\"value\":\"Doe\"}"]},{"new_key":"full_name","singles":["{\"settings\":{\"wpwhpro_data_mapping_value_type\":\"data_value\",\"wpwhpro_data_mapping_convert_data\":\"none\",\"wpwhpro_data_mapping_decode_data\":\"none\",\"wpwhpro_data_mapping_fallback_value\":\"\"},\"value\":\"{:static_first_name:} {:static_last_name:}\"}"]},{"new_key":"mapped_first_name","singles":["{\"settings\":{\"wpwhpro_data_mapping_value_type\":\"key_mapping\",\"wpwhpro_data_mapping_convert_data\":\"none\",\"wpwhpro_data_mapping_decode_data\":\"none\",\"wpwhpro_data_mapping_fallback_value\":\"\"},\"value\":\"static_first_name\"}"]}]}

5. After the import, simply save the template. From there, you can head over to the preview (via the Preview template button) and see how the data mapping template is adjusting the data from the left side (which is the incoming data) to the mapped data (on the right).
6. Lastly, you only need to map the values sent by your service to the arguments available for this action.
   If you are unsure about the format the data is sent from your service, you have various options:
   • One possibility is to check the documentation of your service as they often document their payloads
   • If your payload is not documented, you can also use our Log feature. Once you sent a request from your service to the webhook URL, you will see an entry within the logs, including the data.
   • You can also send the data to a different webhook URL such as the one generated by https://webhook.site/.

4. Summary

If you followed the steps above, you successfully set up your webhook connection and connected the data mapping template. This is everything you need to automatically send data from your external service to the Get mockup action.
In case you want to learn more about this setup and others, please visit our documentation.