📝Editing Letter Templates

How do I access the template editor?

1. Navigate to the "Template Library" section.

   

   

   You can use the search bar to find your desired template easily!
2. Select the template that you want to edit, then click on the dropdown button beside "Use this template"

   
3. Select "Edit template" to open the template editor

   

What can I do with the editor?

1. Text Edits

   You are able to modify the text in your template with various tools in the template editor.

   In order to make edits, highlight the text you want to edit and use the toolbar for formatting options such as bold, italic, and underline.

   For more text formatting options, you can click on the triple dots on the right, where you will be able to change the format of text (eg. header/paragraph), fonts and highlighting of text.

   

   LetterSG template editor text edit options

   The font I would like to use is not supported? The fonts that we support are web safe fonts to ensure that they render well on a variety of devices (Window laptops, MacBooks, Apple phones and Android phones). Unfortunately, this means that some of the fonts you might like to use are not supported, as they are not guaranteed to work well on your recipients' devices. Please choose from the fonts supported for the best viewing experience for your recipients.

2. Add or edit images

   To add a new image, you can either:

   1. Drag your image file into the editor. The new image should be uploaded shortly, and you should be able to see it in the editor as well as the preview on the right.

   2. Select the "Image" button in the toolbar. A file-selection window should pop up, prompting you to pick the new image.

   Select the new image. The new image should be uploaded shortly, and you should be able to see it in the editor as well as the preview on the right.

   

   File selection window to let you choose which image to upload

   

   A toast should pop up after you've uploaded the image to let you know that the image is being uploaded.

   To replace an existing image, double-click on the image you want to replace. A file-selection window should pop up, prompting you to pick the new image. Select the new image. The new image should be uploaded shortly, and you should be able to see it in the editor as well as the preview on the right. The maximum size supported for each image file is 3MB, allowed file types are gif, png and jpeg. Note that signature images should not be hosted for security reasons, as signature images can be potentially misused by malicious actors. The recommend size for background images is 1414px by 2000px which is the standard A4 portrait size. You can create these images using Canva or other design tools.

3. Rename templates To rename your template, click on the template name at the top of the editing bar. The template name should become an editable field. Rename your template as needed. Your new template name is not saved until you click on "Save template"

   

Your template name should be simple and professional as it is displayed to citizens. Keep your template name short and descriptive. Suggested format: Agency short name - Letter for XXX e.g. OGP - Certificate of Curiosity

1. Add or edit tables The template editor supports the easy creation of tables. To add a table:

   1. Click on the "Table" icon in the toolbar.

   2. Specify the number of rows and columns.

   To add a border to the outermost table outline: a. Click on the "Table" icon in the toolbar. b. Select Table properties in the dropdown. Under "General", choose the thickness of the border to change the Border width. Under "Advanced", select your border style and border colour. To add a border to specific cells: a. Click on the "Table" icon in the toolbar. b. Select Cell and then Cell properties. c. Under "Advanced", select your border width, border style and border colour. You can further customise the background colour and border colour of the table. By default the colour of the border is set to transparent.

Select the number of rows and columns you want to add to your table

To adjust vertical alignment of text in table cells: a. Click on the "Table" icon in the toolbar. b. Select Cell > Cell properties properties in the dropdown. c. Under "General", look for "Vertical align" and select Top, Middle or Bottom alignment of text within the cell.

1. Add or edit links To insert hyperlinks into your template, highlight the text you want to link, click on the "Link" icon, and enter the URL. "Text to display", is the actual text that gets displayed on the letter. The "Title" is what users will see when they hover over the link created and it is an optional field.

   

   Link settings for a hyperlink

2. Add page breaks Page breaks are only registered for letters when they're downloaded as PDFs. For the digital letters, page breaks do not show up. This is to optimise the viewing experience for users so that they do not have a disrupted visual flow when scrolling through the digital letter. To add a page break, select in the editor which line where you would like to add the page break, then press the "Page break" button on the toolbar.

   

   Page break button on toolbar

   You should see a dotted bar appear in the editor, where you've added the page break. You should not see any change to the digital letter in the preview on the right, as the line breaks do not affect the appearance of the digital letter.

   

   You should see a dotted bar on the editor where the line break is, but no change to the digital letter preview. Preview the letter PDF to see where the line break is.

   If you preview the letter PDF, you should see that where you've inserted the page break, a new page should start. (see step 7 for how to preview the letter PDF)

   

   You should see a page break in the letter PDF

3. Adding personalised fields If you are wrapping URL links inside your personalised fields, do not include a full stop immediately after the link. Due to the way Android phones parse links, the links may become broken and recipients using Android devices will not be able to access the link. Avoid: Hello, this is your letter link {{letter_link}}. Acceptable: Hello, this is your letter link {{letter_link}}

4. Preview letter PDF Citizens that receive your letter will be able to download a PDF copy of the letter. To ensure that the PDF letter renders as expected, always preview your template PDF when making the content edits to your template. To preview the letter PDF, click on "Preview PDF" in the editor. The PDF file is being generated, this can take a couple of seconds.

   

   When the PDF file is generated, a new window with the sample letter PDF should pop up shortly. Ensure that the contents in the PDF letter shows up as expected, as this is how the downloaded PDF will look like if citizens download a PDF copy of the digital letter.

   
5. Preview Letters on Mobile Devices

   You can now preview how your letters will appear on mobile devices directly within the editor. This helps ensure your letters are properly formatted for all screen sizes, offering a seamless experience for your recipients.

   

Do my edits apply to all users or just myself?

• Any changes to the template are currently applied to the master copy of the template, which will apply to all users once saved.

How do I keep track of previous versions of templates?

• You will be able to track changes made to your template over time with the version history feature by clicking into the icon shown below:

  

  

Can I design a letter/certificate in landscape format?

We do not support landscape format as it is not ideal for mobile viewing. We recommend converting your letter to portrait format instead.

I have some issues with the editor. Where can I seek help?

If you encounter any issues while using the template editor, please share your thoughts with us by reaching out to us via this form or at [e-mail].

Your feedback helps us improve and enhance your experience.