How to create an image using the HTML/CSS to Image app?

1. In the Event section, choose the Scheduler by Quickwork app from the drop-down menu in the Apps field present right below the New Trigger button.
   
2. Select the trigger event as New scheduled event from the drop-down menu in the Triggers field.
3. Set the Interval as per your choice based on how often you want the journey to run.
4. Set the date and time of your choice in the Start at field and keep the Custom payload field empty.
5. No authorization is required as this is an app created by Quickwork:
   
   

Passing the HTML and CSS script to be converted into the Image

1. In the Steps section, click on the Simple Action button and choose the HTML/CSS to Image (HCTI) API app from the drop-down menu in the Apps field.
2. Select the Create image action from the drop-down menu of the Actions field:
   
   
   
   
3. Click on the Link an account button to establish a connection.
4. The Connect to HTML/CSS to Image (HCTI) API window will pop up asking you to enter the User ID and API Key of your HTML/CSS to Image (HCTI) API account:
   
   
   
   
5. Once all the required inputs have been specified, click on the Link account button. Your HTML/CSS to Image (HCTI) API account will get connected successfully.
6. In the HTML field, enter your HTML code for the image you want to create. This field is mandatory and needs to be filled:
   
   
   
   
7. In the CSS field, enter the CSS code for the Image you want to create:
   
   
   
   
8. After entering the HTML and CSS code, there are some additional optional fields such as Google fonts, URL, Viewport Width, Viewport Height, and Delay. You can enter the relevant details as per the requirement of the Image you wish to generate:
   
   

Executing the journey

Save the changes incorporated in the journey and click the Save & Start button. You'll be taken to the History tab automatically. Click on the journey ID that just got executed.

In the Steps section, click the action bar to expand. The Input block shows the inputs provided and the Output block shows the response received from the API. In this case, the Output block will contain a URL for the converted image:

Copy and paste the URL received in a new tab to view the image:

Thus, your HTML and CSS code has been successfully converted to an image.