Skip to main content

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

Quickwork
  • Updated

Skill level: Intermediate

Time required: 5 minutes

This article demonstrates the conversion of HTML/CSS code into an image using the HTML/CSS (HCTI) API.

Prerequisites

  • A Quickwork account and and familiarity with the platform's GUI.

Step-bystep guide

Configuring the trigger

  1. In the Event section, choose the Scheduler by Quickwork app from the drop-down menu in the Apps field.
  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.
    mceclip0.png

Passing the HTML and CSS script to convert into an 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.

    mceclip1.png

  3. Click on the Link an account button to establish a connection.
  4. A connection window will appear, asking for the User ID and API Key of your HTML/CSS to Image (HCTI) API account.  
    mceclip0.png

  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.  

    mceclip3.png

  7. In the CSS field, enter the CSS code for the Image you want to create.

    mceclip4.png

  8. Optionally, you can configure the following additional fields as needed, such as Google fonts, URL, Viewport width, Viewport Height, and Delay.  

    mceclip5.png

Executing the journey

  1. Save the journey by clicking the Save & Start button.

  2. The journey will automatically redirect to the History tab.

  3. In the Steps section:

    1. Expand the action bar to view the Input block, which displays the inputs provided.
    2. Check the Output block for the response received from the API. The output will contain a url for the generated image.

mceclip1.png

4. Copy the URL and paste it into a new browser tab to view the image.

mceclip2.png

Your HTML and CSS code has been successfully converted into an image.

Related articles

Comments

0 comments

Please sign in to leave a comment.