Files
notifications-admin/app/templates/views/how-to/edit-and-format-messages.html
Alex Janousek 6f5750f095 Removed all govuk css (#2814)
* Removed all govuk css

* Updated reference files

* Removing govuk js

* Fixed casing for modules, removed unused page

* Got more reference images

* Updated template page

* Removed govuk padding util

* Updated hint to uswds hint

* More govuk cleanup

* Commiting backstopjs ref files

* Fixed all unit tests that broke due to brittleness around govuk styling

* Added new ref images

* Final removal of govuk

* Officially removed all govuk references

* Updated reference file

* Updated link to button

* UI modernization

* Cleanup

* removed govuk escaping tests since they are no longer needed

* Fix CodeQL security issue in escapeElementName function

- Escape backslashes first before other special characters
- Prevents potential double-escaping vulnerability
- Addresses CodeQL alert about improper string escaping

* Found more govuk removal. Fixed unit tests

* Add missing pipeline check to pre-commit

* updated test

* Updated e2e test

* More update to e2e test

* Fixed another e2e test

* Simple PR comments addressed

* More updates

* Updated backstop ref files

* Refactored folder selection for non-admins

* Updated redundant line

* Updated tests to include correct mocks

* Added more ref files

* Addressing carlos comments

* Addressing Carlo comments, cleanup of window initing

* More cleanup and addressing carlo comments

* Fixing a11 scan

* Fixed a few issues with javascript

* Fixed for pr

* Fixing e2e tests

* Tweaking e2e test

* Added more ref files and cleaned up urls.js

* Fixed bug with creating new template

* Removed brittle test - addressed code ql comment

* e2e race condition fix

* More e2e test fixes

* Updated e2e tests to not wait for text sent

* Updated test to not wait for button click response

* Made tear down more resilent if staging is down

* reverted e2e test to what was working before main merge

* Updated backstopRef images

* Updated gulp to include job-polling differently
2025-10-06 09:38:54 -04:00

98 lines
4.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "base.html" %}
{% from "components/service-link.html" import service_link %}
{% block per_page_title %}
Edit and format messages
{% endblock %}
{% block content_column_content %}
<h1 class="font-heading-xl">Edit and format messages</h1>
<p class="usa-body">This page explains how to:</p>
<ul class="list list-bullet">
<li><a class="usa-link" href="#formatting">format your content</a></li>
<li><a class="usa-link" href="#links">add links</a></li>
<li><a class="usa-link" href="#personalized-content">personalize your content</a></li>
<li><a class="usa-link" href="#optional-content">add optional content</a></li>
</ul>
<h2 class="font-heading-lg" id="formatting">Format your content</h2>
<p class="usa-body">You can see a list of formatting instructions on the edit template page:</p>
<ol class="list list-number">
<li>Go to the {{ service_link(current_service, 'main.choose_template', 'templates') }} page.</li>
<li>Add a new template or choose an existing template and select <b class="bold">Edit</b>.</li>
</ol>
<!-- <p class="usa-body">Email templates can include:</p>
<ul class="list list-bullet">
<li>headings</li>
<li>bullets</li>
<li>inset text</li>
<li>horizontal rules</li>
</ul>
<p class="usa-body">Notify does not allow bold, italics, subheadings, underlined text or different fonts. This is because they can make it harder for users to read what youve written.</p> -->
<h2 class="font-heading-lg" id="links">Add links</h2>
<p class="usa-body">When composing a text message, write URLs in full and Notify will convert them into links for you.</p>
<p class="usa-body">You cannot convert text into a link. <!-- Research shows that people like to check a URL looks genuine before clicking the link in an email. This is hard to do if the URL is hidden behind clickable link text.--></p>
<p class="usa-body">We do not recommend using a third-party link shortening service because:</p>
<ul class="list list-bullet">
<li>your users cannot see where the link will take them</li>
<li>your link might stop working if theres a service outage</li>
<li>you can no longer control where the redirect goes</li>
</ul>
<h2 class="font-heading-lg" id="personalized-content">Personalize your content</h2>
<p class="usa-body">To personalize the content of your messages, add a placeholder to the template.</p>
<p class="usa-body">Placeholders are filled in with details, like a name or reference number, each time you send a message.</p>
<p class="usa-body">To add a placeholder to the template:</p>
<ol class="list list-number">
<li>Go to the {{ service_link(current_service, 'main.choose_template', 'templates') }} page.</li>
<li>Add a new template or choose an existing template and select <b class="bold">Edit</b>.</li>
<li>Add a placeholder using double parenthesis. For example: Hello ((first&nbsp;name)), your reference is ((ref&nbsp;number)).</li>
<li>Select <b class="bold">Save</b>.</li>
</ol>
<p class="usa-body">When you send a message you can either:</p>
<ul class="list list-bullet">
<li>manually fill in the placeholders yourself</li>
<li>upload a list of personal details and let Notify do it for you</li>
</ul>
<p class="usa-body">If you upload a list, the column names need to match the placeholders in your template.</p>
<h2 class="font-heading-lg" id="optional-content">Add optional content</h2>
<p class="usa-body">To add optional content to your messages:</p>
<ol class="list list-number">
<li>Go to the {{ service_link(current_service, 'main.choose_template', 'templates') }} page.</li>
<li>Add a new template or choose an existing template and select <b class="bold">Edit</b>.</li>
<li>Use double parenthesis and ?? to define optional content. For example, if you only want to show something to people who are under 18: ((under18??Please get your application signed by a parent or guardian.))</li>
<li>Select <b class="bold">Save</b>.</li>
</ol>
<p class="usa-body">For each person you send this message to, specify yes or no to show or hide this content. You can either:</p>
<ul class="list list-bullet">
<li>do this yourself</li>
<li>upload a list of personal details and let Notify do it for you</li>
</ul>
<p class="usa-body">If you upload a list, the column names need to match the optional content in your template.</p>
{% endblock %}