HTML Document Builder

This article was developed to describe the HTML Document Builder function within the CRM. It is organized into the following sections:

• Overview
• Purchasing a Document Build
• When to Use the HTML Document Builder
• Creating an HTML Document Template
• HTML Document Builder Tools
• Basic Style Header
• Previewing a document using a Customer ID
• Border Styles
• Video

Overview

The HTML Document is one of two formats of document templates in the CRM, the other one being the PDF Document. The HTML Document Builder allows a user to either type in a document template using basic word processor tools, or they can modify its source code using HTML Coding and/or CSS Styles to allow for more customization.

Purchasing a Document Build

Building documents into the CRM can be resource intensive, so you may decide that you wish to purchase a document build request. If so, please submit the document file you wish to be built to our sales team at sales@centrexsoftware.com for pricing. (Note: If you are a Centrex client, please contact sales@centrexsoftware.com)

Additionally, you should only be sending the final version of the document, not one in progress. If you are still building out your document on your side or having it reviewed for revision, we will not start building it into Centrex as it will require us to start over with each new version. If a revision is submitted, you must be willing and able to tell us exactly what differences were made.

**Please note that when we build a document template, we are not designing the document, we are merely replicating what has been submitted to us. We do not make any format/spelling/design changes to deviate from the submitted file without a specific written/documented request; These are the responsibilities of the requester.

IMPORTANT: It is the responsibility of the requester to thoroughly review and test their built document template after notice of completion is received.

When to Use the HTML Document Builder

When to use the HTML Document Builder:

1. The source document file is not a PDF File (Word Processors like Microsoft Word work best)
2. The source document requires tags to populate within paragraphs but does not offer blank spaces (inline text).
3. A different document is required to be embedded into the middle of this document (This is rare and can usually be avoided using Document Packages)

When NOT to use the HTML Document Builder:

1. If the document requires more than two different signers (for example, if the document needs a signature from a client, a co-client, and the assigned to user)
2. The source document is required to look exactly the same once built into the CRM; while there are many tools available in the HTML Document Builder, the results are rarely a 1-to-1 visual match.

Creating an HTML Document Template

To create a new HTML Document Template from scratch, from the Docs tab, select “Create A New HTML Document” from the Navigation Bar.

From here, the first thing you should do is give the document a unique Document Title for the account and then select “Save Document” in the navigation bar. Once done, you can begin building out the template in the Template Body.

For the most part, building an HTML-style document is similar to using basic word processors (examples: Microsoft Word, Google Docs, LibreOffice Writer, etc). You can either type the document directly into the Template Body section, or you can copy and paste the words over.

NOTE: If you copy/paste, the formatting will need to be updated once it’s placed into the CRM, so it’s best practice to do one page at a time and not copy/paste the entire document all at once.

If data needs to auto-populate into the document template, please be sure to use the correct tag. You can find a list of our tags in the Tags article, found within the Centrex Help Center.

IMPORTANT: the HTML Document Builder does not auto-save, so save your document often during the building process. Additionally, do not open more tabs to other pages of the CRM while building the document.

NOTE: A "Debug HTML" button is available on the Navigation Bar to ensure the integrity of your HTML Code.

HTML Document Builder Tools

The tools available in the Template Body are very similar to the ones used in most word processor software, but a few are unique to the CRM.

• File:
  • New Document - This will clear the current document body to start from scratch
  • Print - This will print the document
• Edit:
  • Undo
  • Redo
  • Cut
  • Copy
  • Paste
  • Paste as text
  • Select all
  • Find and replace
• Insert:
  • Media - Allows media to be inserted/edited in a document template
  • Image - Allows an image to be placed
  • Link - Allows a link to be created
  • Special Character - Allows you to enter a special character not usually defined on a standard keyboard
  • Horizontal line - Adds a horizontal line
  • Anchor - Creates an anchor
  • Page break - Creates a page break that tells the document template to continue document generation from the next page down.
  • Date/Time - Adds a formatted date tag
  • Nonbreaking space - Adds a space
  • Template - Adds a template
• View:
  • Show invisible characters
  • Show blocks
  • Visual aids - allows a user to toggle on/off visual aids (like anchors)
  • Preview - Previews the document template using a default Test User contact.
  • Fullscreen - Makes the document template body take up the full screen.
  • ? Help - Shows a user helpful shortcut keys, as well as allows them to view active plugins for the document builder.
• Format: This tab contains easy formatting options such as Bold, Italicize, Underline, etc.
• Table: This tab will allow you to quickly create a table based on a highlighted number of rows/columns, or will allow you to make modifications to an already existing table’s/cell’s properties
• Tools: This contains an option to access the source code of the document, or allow a user to run a spellcheck.

Buttons of Note:

Paste Button: This will paste any currently copied text (text format does not copy over)

Source Code: This is a shortcut to the source code, allowing a user to edit the HTML that makes up the document template.

• To access the HTML Editor, click the <> image that appears on the page (boxed in red below).

• To learn more about HTML, go to: HTTP://www.w3schools.com/html OR HTTP://www.codeacademy.com

Help: Shows a user helpful shortcut keys, as well as allows them to view active plugins for the document builder.

Basic Style Header

Before you begin creating the document body, establish a basic style header. Basic style headers establish a default look of the document (font family, font size, margins, etc.) so as to remain consistent in the document unless otherwise specified. The header just needs to be added to the source code of the document. Below is an example of a basic style header that you can use:

<style><!--

p { font-family:Arial; font-size: 14px; }

li { font-family:Arial; font-size: 14px; }

div { font-family:Arial; font-size: 14px; }

table { font-family:Arial; font-size: 14px; }

td { font-family:Arial; font-size: 14px;}

body { margin-top: 50px; margin-bottom: 50px; margin-right: 50px; margin-left: 50px; }

--></style>

Previewing a document using a Customer ID

Normally when you preview an HTML document, it will show the preview using a default Test User in the CRM. To preview a document using a customer ID, begin by previewing the document as normal. From the preview view, navigate to the URL of the page and add the following to the end of it:

&id=###       (Where ### equals the contact ID for the contact you wish to showcase the preview with)

When you press enter to refresh the page, it will show a new preview, this time using the matching ID’s contact to fill in the data.

Border Styles

When building tables, sometimes you will need to format tables/cells to appear in a specific way:

Extra Commands: