Modifying HTML Document Templates

All improveit 360 Document Templates are coded in HTML. This Article includes instructions for downloading the HTML behind the Document, modifying the HTML in a user-friendly HTML editor and re-uploading the document with your changes. Note: This will need to be done for every Document in order to include your Company Logo on the document. 

For a list of out-of-the-box Document Templates see also: Document Templates 

Step 1: Download the HTML from the Document you want to Edit

Navigate to the Files menu and select Libraries. 

If you do not see the Libraries menu on the left-hand side, you will need to grant your Profile access to Libraries in System Permissions. 

If you do not see Libraries, navigate to the Setup menu, and go to Profiles

                           

Go to the i360 Admin Profile, then go to System Permissions

Check the checkbox to enable "Access Libraries" 

Then click Save

Navigate back to the Files menu, and you should now see Libraries. 

From here you should see Object Folders for Sales Appointment, Sale and Quote. 

In this example, we will insert the Company Logo within our Quote Template document. 

Click on the Quote Templates folder. 

Then click on the Quote document template. 

Copy all the HTML code

Paste the HTML code into Liveweave.com and locate the Company Logo image tag. 

Step 2: Upload your Company Logo to the Asset Library 

Next, navigate to the Files Tab and go to Libraries 

Click on Asset Library

Then click Upload Asset File 

Click Upload File and Browse your computer for the Logo you'd like to use.

When you select the File the system will prompt you to choose the File Sharing options. Be sure to select both: 

• Let guest users see this asset file on public login pages 
• Make asset file available to Salesforce org users. 

Then click Save.

Next, you will need to Copy the image tag.

Step 3: Copy the correct Image Tag for your new Company Logo 

We will need to use the PDF Helper tool to Copy the image source tag. 

Next, navigate to any Quote record, in order to use the PDF Helper tool. 

If you do not have the PDF Helper tool, see also: Adding the PDF Helper component to the page 

Expand the Images menu

Click on your Company Logo to copy the image URL. 

You'll see a green success toast that you've copied the image tag to your clipboard.

Step 4: Paste the Image Tag into the HTML Editor

Locate the Company Logo image source tag within the HTML.

Paste the new image source tag that you copied from the PDF Helper tool.

NOTE: This is NOT an image source URL. So, the image will not appear in the preview. 

The syntax for the Company Logo will be something like this:

src="data:image/png;base64, {!image:069fK000005pVJtQAM}" alt="Company Logo">

Note that using a traditional Image Source HTML tag (like the below code) will not work for the PDF Generator tool. 

<img src="data:image/png;base64, {!image:069a500000FgRMXAA3}">

Note: You will NOT see your logo in the preview pane. The image will appear to be a broken link. Don't worry, the PDF Generator will recognize the formatting of the image tag, even though other applications do not. 

If everything else looks good, Save the HTML file. Use the Download menu and choose Download as HTML

Step 5: Replace your existing Document Template 

The last step is replacing the existing HTML file with the new one you've just downloaded from Liveweave. Go back to the Files menu and select the document you are editing (in this example I was editing the Quote template). 

Open the Document and click the down arrow, select Upload New Version. 

Browse your computer for the newly downloaded HTML file, and select it. 

The system allows you to track what was changed in the new Document Template. We recommend taking this opportunity to indicate exactly what was changed, then click Upload. 

Next, you'll want to test your changes by navigating to a record in the system and using the PDF Generator tool to generate a new PDF file using the new Document Template. 

In this example I will navigate to a Quote record. 

Click on the PDF Generator, then click the arrow next to the Document you'd like to generate, then click Download. 

The downloaded PDF document should now include your company's logo. 

This is my Logo: 

This is how the Document is generated: