Supercharge HTML CSS To Image with Relevance AI

HTML CSS To Image (HCTI) integration allows you to programmatically convert HTML and CSS into high-quality images. This integration enables developers to generate images from HTML/CSS code, create screenshots from URLs, automate image generation for web content, and maintain consistent visual rendering across platforms.

To get started, ensure you have an HTML CSS To Image account with API access and the necessary OAuth credentials configured for authentication. Additionally, if you are using the Pipedream integration, a Pipedream account is required.

Your environment must support HTTPS and REST API calls, and be able to handle JSON responses. Make sure you have the required permissions, including the `pipedream-html-css-to-image-read-write` OAuth scope and API access enabled on your HCTI account.

For authentication setup, use the following code snippet:

const config = { oauth_account_id: "YOUR_HCTI_OAUTH_ACCOUNT_ID", oauth_permission_type: "pipedream-html-css-to-image-read-write" }

Next, configure the base settings:

const baseConfig = { base_url: "https://hcti.io", headers: { "Content-Type": "application/json" } }

To create an image from HTML/CSS, use the following example:

const createImageFromHTML = { method: "POST", path: "/v1/image", body: { html: "<div>Hello World!</div>", css: ".div { color: blue; }" }, oauth_account_id: "YOUR_OAUTH_ACCOUNT_ID" }

The expected response will include a URL to the generated image:

{ response_body: { url: "https://hcti.io/v1/image/example-hash", id: "example-hash" }, status: 200 }

For creating an image from a URL, you can use the following code:

const createImageFromURL = { method: "POST", path: "/v1/image/url", body: { url: "https://example.com" }, oauth_account_id: "YOUR_OAUTH_ACCOUNT_ID" }

For advanced usage, you can customize headers in your requests:

const customRequest = { method: "POST", path: "/v1/image", headers: { "User-Agent": "Custom Application", "Accept": "application/json" }, body: { html: "<div>Custom Content</div>" } }

In case of troubleshooting, here are some common issues and their solutions:

• Authentication Errors (401): Verify OAuth account ID, ensure permissions are configured, and check if the access token is expired.
• Invalid Request Format (400): Verify HTML/CSS syntax, ensure URL encoding, and check content-type headers.
• Rate Limiting (429): Implement request throttling, check account limits, and add retry logic for failed requests.
• Timeout Issues: Reduce HTML/CSS complexity, check network connectivity, and implement appropriate timeout handling.

For best practices, consider the following:

• Performance Optimization: Minimize HTML/CSS content, cache frequently used images, and use appropriate image dimensions.
• Error Handling: Use try-catch blocks to manage errors effectively.

try { const response = await makeHCTIRequest(config); if (response.status !== 200) { handleError(response); } } catch (error) { console.error("HCTI Request failed:", error); }

• Security: Never expose OAuth credentials in client-side code, validate input HTML/CSS, and implement proper access controls.

Be aware of resource limits, including a maximum HTML and CSS size of 50MB, a request timeout of 30 seconds, and rate limits that vary by plan.

For support resources, refer to the API documentation at https://hcti.io/docs, contact support via email at [email protected], or check the status page at https://status.hcti.io.

Remember to replace placeholder values (YOUR_OAUTH_ACCOUNT_ID, etc.) with your actual credentials when implementing the integration.