How to Use AI to Customize an Order Template in MeasureSquare CRM

In this article, we will walk you through how to use an AI assistant like Claude to redesign an Order Template — the layout used for your Quotes, Invoices, Work Orders, and other documents — so it matches a design you already have, such as an old PDF quote or invoice.

Order Templates are built from HTML with special {{placeholder}} tags that the CRM fills in with real order data. Claude can rewrite this HTML for you while keeping those tags intact.

AI-generated code can make mistakes — always review it before using it. You don't need to know HTML to follow this guide. 

Copying Your Current Template's Source Code

Step 1: Go to Settings > Order Templates and open the template you want to update.

Step 2: Click Edit, then click the Source Code icon (</>) in the toolbar.
Step 3: Select all the code in the box and copy it

Gathering Your Reference Design

Step 4: Collect the design you want your template to look like. This can be a PDF quote or invoice, a Word or Excel document, or a screenshot.  Claude can read text directly out of a PDF or image.

Asking Claude to Rewrite the Template

Step 5: Open a chat with Claude.

1. Tell Claude which document type this is — Quote, Invoice, Work Order, Purchase Order, etc. 
   
2. Paste in your current template's source code from Step 3 and your reference design (or sample PDF template) from Step 4.
   
3. Ask Claude to rewrite the HTML so the layout matches your sample template, using only placeholders that already appear in your source code. 
   

Saving the Updated Template

Step 6: Claude will analyze your prompt and attachments, then reply with the updated source code for your template. Copy the source code Claude gives you.

Step 7: Go back to Admin > Order Templates and open your template.
Step 8: Click Edit, then the Source Code icon (</>). Select all the existing code, delete it, and paste in the new code. Click Save.  The editor updates right away, showing your new layout with the placeholder tags in place so you can confirm the design looks right.

Step 9: Click Preview to confirm the layout renders correctly.

If something looks off in the preview, go back to Claude with a screenshot of the problem and ask it to fix that specific issue.

For any further questions, please reach out to our Support team

Monday – Friday from 7:30am–4:30pm PST: (626) 683-9188 ext. 3
All Hours: support@measuresquare.com

• Related Articles

• How to Customize Order Forms Toolbar in MeasureSquare CRM

  This article will guide you through how to customize the order forms toolbar in MeasureSquare CRM. This article applies to the MeasureSquare CRM First, we'll show you how to access your Diagram from your Project: Step 1: Click on Projects Module on ...

• How to edit the Source Code of your Orders Template in MeasureSquare CRM?

  This article will guide you how to edit the source code inside of your orders template in the MeasureSquare CRM. This article applies to MeasureSquare CRM Steps to Access the Source Code in the Orders Template Step 1: Open the any of the Order ...

• How to Create and Edit a Purchase Order in MeasureSquare CRM

  In this article and video we will show you how to create a purchase order in MeasureSquare CRM Step 1: Open your project in MeasureSquare CRM. Go to the Diagram screen where the project and estimation data are located. Step 2: On the Diagram screen, ...

• MeasureSquare CRM Implementation Checklist

  A start-to-finish guide for your implementation manager Document File for the Implementation Checklist: CRM Implementation Checklist PHASE 0: Pre-Implementation Planning Complete before any configuration begins. Estimated time: 1–2 weeks. Strategic ...

• How to Create Customize Fields in MeasureSquare CRM

  In this article, we will cover how to create custom fields for different items in MeasureSquare CRM This article applies to MeasureSquare CRM. 1. From the homepage, click on your profile in the top right corner then click on Settings. 2. To add/edit ...