Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

How to Use AI to Create Custom HTML Proposal Templates

You don't need to be a web developer to create professional, custom HTML proposal templates for eConstruction. By using Generative AI tools like ChatGPT, Gemini, or Claude, you can replicate your existing Word or PDF quote layout and convert it into code that eConstruction understands.

This guide will show you how to generate the code and where to paste it.

Step 1: Prepare Your Existing Quote

Take a screenshot or have a clear PDF/Word file of the quote layout you want to replicate. Most modern AI tools allow you to upload an image or file directly.

Step 2: Generate the HTML Code using AI

Open your preferred AI tool (e.g., ChatGPT, Gemini, Claude) and use the following prompt.

Copy and Paste this Prompt into the AI:

"Act as an expert web developer and email designer. I am going to upload an image/file of a price quote document. I need you to write clean, responsive HTML code that replicates this design exactly.

Requirements:

  1. Structure: Use an HTML table structure to ensure the layout stays consistent when generating PDFs.

  2. Styling: Use inline CSS for all styling (fonts, colors, borders). Do not use external stylesheets.

  3. Placeholders: I will be using a dynamic system to fill in the data later. Everywhere you see specific data in the image (like Client Name, Date, Quote Number, Address), please leave a clear text placeholder like [CLIENT_NAME] or [DATE].

  4. Line Items: Create a sample table row for the products/services.

  5. Images: If there is a logo, insert a placeholder <img> tag where I can add my own logo URL later.

Please provide only the raw HTML code."

Action: Upload your file/image and send the prompt. Copy the HTML code the AI generates.

Step 3: Import the Code into eConstruction

  1. Navigate to Settings.

  2. In the "General" section, click Proposal Templates.

  3. Click on the Duplicate icon on the Eligeo Sample Template.

  4. Open the Choose Eligeo Sample Template (copy) and click on the Pencil Icon.

  5. Paste the HTML code you generated with the AI into this window and click Update.

 

 

Step 4: Preview and Save

  1. By clicking in the “eye” button, below the “Name your template” field, you will be able to see a preview of your quote.

  2. If you need to make further structural changes, you need to click on the eye button and then on the Edit Button (Pencil Icon) to modify the HTML code directly.

  3. Click Update to save your template.