darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-15 17:44:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

updated content from feedback

Browse Source
This commit is contained in:
Beverly Nguyen
2024-10-24 13:57:01 -07:00
parent e64ba86a2b
commit 00ad7b7581
7 changed files with 107 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/snap-renewal.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
app/assets/images/snap-renewal.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 54 KiB

32
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -852,3 +852,35 @@ li.linked-card:hover svg,
.guidance_link {
text-decoration: none;
}
.usa-link--downloadable {
position: relative;
}
.usa-link--downloadable::after {
background-image: url(../img/material-icons/download.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 1.75ex 1.75ex;
height: 1.75ex;
width: 1.75ex;
content: "";
display: inline;
margin-top: .7ex;
margin-left: 2px;
padding-left: 1.75ex;
vertical-align: middle;
}
.usa-link--downloadable::after {
background: 0 0;
background-color: currentColor;
-webkit-mask-image: url(../img/material-icons/download.svg), linear-gradient(transparent, transparent);
mask-image: url(../img/material-icons/download.svg), linear-gradient(transparent, transparent);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1.75ex 1.75ex;
mask-size: 1.75ex 1.75ex;
}

69
app/templates/views/guidance/clear-goals.html
View File

@@ -11,44 +11,51 @@
<section class="usa-prose">
<h1>{{page_title}}</h1>
<p class="font-sans-lg text-base">Start with a singular purpose. Make explicit what you want to achieve.</p>
<p>Text messaging should be one part of how you communicate with the people you serve, and it is best used to provoke
action or influence behavior. Therefore, when starting to plan your texting campaign, it’s important to start with
the end in mind.
</p>
<div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
<div class="usa-summary-box__body">
<h4 class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
To establish clear goals, start by answering the following questions:
</h4>
<div class="usa-summary-box__text">
<ul class="usa-list">
<li><i>Who</i> do you want to text?</li>
<li><i>At what moments</i> do you want to text them?</li>
<li><i>Why</i> do you want to text them?</li>
<li>What do you want them to <i>do</i>?</li>
</ul>
<div class="grid-row grid-gap-3">
<div class="tablet:grid-col">
<p>Text messaging should be one part of how you communicate with the people you serve, and it is best used to
provoke
action or influence behavior. Therefore, when starting to plan your texting campaign, it’s important to start
with
the end in mind.
</p>
<div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
<div class="usa-summary-box__body">
<h4 class="usa-summary-box__heading" id="summary-box-establish-clear-goals">
To establish clear goals, start by answering the following questions:
</h4>
<div class="usa-summary-box__text">
<ul class="usa-list">
<li><i>Who</i> do you want to text?</li>
<li><i>At what moments</i> do you want to text them?</li>
<li><i>Why</i> do you want to text them?</li>
<li>What do you want them to <i>do</i>?</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="grid-container">
<div class="tablet:grid-col-6">
<div class="usa-card__container border-0 width-full overflow-hidden height-mobile">
<img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
<div class="position-absolute flex text-cener padding-5 padding-top-9">
<p class="sms-message-wrapper text-center">Dept. of Human Services: We believe your EBT card may have been
used by
someone else. Please call the number on the back of your card (888-123-5555) to cancel and get a new one. If
you
need a new card immediately, please visit your local office.
</p>
<div class="tablet:grid-col width-full padding-top-3">
<div class="grid-container">
<div class="usa-card__container border-0 width-full overflow-hidden maxh-mobile-lg">
<img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
<div class="position-absolute flex text-center padding-5 padding-top-15">
<p class="sms-message-wrapper text-left">Dept. of Human Services: We believe your EBT card may have been
used by
someone else. Please call the number on the back of your card (888-123-5555) to cancel and get a new
one.
If
you
need a new card immediately, please visit your local office.
</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<h2>Add new header here</h2>
<h2>When should you send a text?</h2>
<div class="grid-row grid-gap-3">
<div class="tablet:grid-col">
<div class="do-dont">
@@ -171,6 +178,8 @@
ideally, from people who receive the texts themselves to ensure your messages are clear and actionable.
</p>
<h2>Measure performance</h2>
<p>Building and operationalizing a texting initiative requires time and effort, and you want to be able to demonstrate
the results of that effort.</p>
<div class="usa-summary-box maxw-tablet" role="region" aria-labelledby="summary-box-establish-clear-goals">
<div class="usa-summary-box__body">
<div class="usa-summary-box__text">

43
app/templates/views/guidance/establish-trust.html
View File

@@ -26,9 +26,14 @@
key service locations as well as partnering with community organizations to get the word out about your new texting
program.</p>
<h3>An example of key messages in direct mail</h3>
<img src="{{asset_url('images/snap-renewal.png')}}" alt="snap-renewal">
<h3>Prime your audiences to trust you</h3>
<figure>
<img src="{{asset_url('images/snap-renewal.jpg')}}" alt="snap-renewal" width="100%">
<figcaption>A paper mailer sent out by the State of Connecticut, in partnership with Code for America, to get the
word out about their new SNAP texting initiative. Flier displays an image of an introduction text and includes key
messages to reinforce legitimacy.</figcaption>
</figure>
<h3>Prime your audiences to trust you</h3>
<ul class="usa-card-group flex-1 flex-wrap padding-top-2">
<li class="flex-1 width-full height-full padding-bottom-2">
<div class="usa-card__container border-0">
@@ -40,7 +45,7 @@
<li><b>Text types</b> – Be clear on the types of texts you intend to send, how often, and why they matter</li>
<li><b>Privacy policy</b>– For example, state that you will not collect personal information, including the
types of information you will never ask for</li>
<li><b>Places to verif</b>y – Include a phone number, website, or human where people can verify that the texts
<li><b>Places to verify</b> – Include a phone number, website, or human where people can verify that the texts
are coming from you</li>
<li><b>Opt out</b> – Provide opt-out instructions and a disclaimer for the potential cost of receiving the
text
@@ -48,10 +53,10 @@
</ol>
</div>
</li>
<li class="usa-card flex-1 usa-card--media-right width-full">
<li class="usa-card flex-1 usa-card--media-right width-full padding-top-3">
<div class="usa-card__container border-0 width-full overflow-hidden height-phone-lg">
<img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
<div class="position-absolute flex text-cener padding-5 padding-top-9">
<div class="position-absolute flex text-center padding-5 padding-top-15">
<p class="sms-message-wrapper text-left">Dept. of Social Services: Welcome to text updates from the
{{circle_number(1)}}<b>Department of Social Services.</b> {{ circle_number(2) }}<b>We’ll always text
you from
@@ -75,21 +80,21 @@
<li class="flex-1 width-full height-full padding-bottom-2">
<div class="usa-card__container border-0">
<ol start="7" class="guidance-list set-two">
<li>Identify yourself in the text message. Use a consistent and familiar program name to precede each text you
send.</li>
<li>Personalize with first name. Through A/B testing, Code for America saw an increase in follow-through by
25% if someone’s first name was included.</li>
<li>Use full and direct .gov website URLs. Avoid link shorteners, as they obscure your links and potentially
make it easier for a malicious actor to spoof your text.</li>
<li>If providing a phone number, use a familiar phone number and provide information on how to verify its
legitimacy.</li>
<li>Identify yourself in the text message. Use a consistent and familiar <b>program name</b> to precede each
text you send.</li>
<li>Personalize with <b>first name</b>. Through A/B testing, Code for America saw an increase in
follow-through by 25% if someone’s first name was included.</li>
<li>Use <b>full and direct .gov website URLs</b>. Avoid link shorteners, as they obscure your links and
potentially make it easier for a malicious actor to spoof your text.</li>
<li>If providing a phone number, use a familiar phone number and <b>provide information on how to verify</b>
its legitimacy.</li>
</ol>
</div>
</li>
<li class="usa-card flex-1 usa-card--media-right width-full">
<li class="usa-card flex-1 usa-card--media-right width-full padding-top-1">
<div class="usa-card__container border-0 width-full height-mobile overflow-hidden">
<img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
<div class="position-absolute flex text-cener padding-5 padding-top-9">
<div class="position-absolute flex text-center padding-5 padding-top-10">
<p class="sms-message-wrapper text-left">
{{circle_number(7) }}<b>Dept. of Social Services:</b> Hi {{circle_number(8) }}<b>Julie,</b> Your Medicaid
renewal is closing December 31, 2023. You can renew online at {{circle_number(9) }}<a
@@ -110,15 +115,15 @@
generated if a recipient tries to text a response to your message. Use the auto-response to reaffirm your key
messages around legitimacy and communicate to recipients that texts are coming from an automated system.</p>
<ol class="guidance-list set-three">
<li>Provide a way to contact a human in any auto-response text</li>
<li>Provide information on how to opt out and opt back in</li>
<li>Provide <b>a way to contact a human</b> in any auto-response text</li>
<li>Provide <b>information on how to opt out</b> and opt back in</li>
</ol>
</div>
</li>
<li class="usa-card flex-1 usa-card--media-right width-full">
<li class="usa-card flex-1 usa-card--media-right width-full padding-top-3">
<div class="usa-card__container border-0 width-full overflow-hidden guidance">
<img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
<div class="position-absolute flex text-cener padding-5 padding-top-9">
<div class="position-absolute flex text-center padding-5 padding-top-15">
<p class="sms-message-wrapper text-left">
Dept. of Social Services: This number is unmonitored. To {{circle_number(11) }} <b>contact us, call
888-123-4567</b>. We will never ask for personal details in a text. If you have questions about how to

10
app/templates/views/guidance/rules-and-regulations.html
View File

@@ -42,8 +42,9 @@
},
{
"url_link":
"https://docs.google.com/document/d/1Q8shgH9ODs-aD3wiRolGge4kBSTJzMIebj29dNkqK9Q/edit#heading=h.ddk0bn7sfe86",
"images/TCPA_Overview.pdf",
"url_text":"Download and share our overview of the TCPA with your legal counsel",
"is_downloadable": true,
"p_text": 'It provides a baseline
interpretation to aid your legal counsel in getting up to speed with what might be needed for your program or use
case.
@@ -60,7 +61,11 @@
<div class="usa-collection__body">
{% if item.url_text %}
<h4 class="usa-collection__heading">
<a class="use-link usa-link--external" href="{{ item.url_link }}" target="_blank">{{ item.url_text }}</a>
<a class="usa-link {% if item.is_downloadable %}usa-link--downloadable{% else %}usa-link--external{% endif %}"
href="{% if item.is_downloadable %}{{ asset_url(item.url_link) }}{% else %}{{ item.url_link }}{% endif %}"
target="_blank">
{{ item.url_text }}
</a>
</h4>
{% endif %}
<p class="usa-collection__description">
@@ -69,6 +74,7 @@
</div>
</li>
{% endfor %}
</ul>
<h3>Opting out</h3>
<p>

26
app/templates/views/guidance/write-for-action.html
View File

@@ -60,14 +60,13 @@
</ol>
</div>
</li>
<li class="flex-1 usa-card--media-right width-full">
<li class="flex-1 usa-card--media-right width-full padding-top-3">
<div class="usa-card__container border-0 width-full">
<img class="width-full" src="{{ asset_url('images/phone_grey.svg') }}" role="img" alt="Phone" />
<div class="position-absolute flex text-cener padding-5 padding-top-9">
<p class="text-center">Write an introductory text before you start sending messages:</p>
<p class="sms-message-wrapper text-center">{{circle_number(1) }}State Medicare Agency: Hello, MEDICARE has
<div class="position-absolute flex text-center padding-5 padding-top-15">
<p class="sms-message-wrapper text-left">{{circle_number(1) }}State Medicare Agency: Hello, MEDICARE has
attempted to
send you an update about your claim, but the mail was returned. {{circle_number(2) }}Please go to
send you an update about your claim, but the mail was returned. <br>{{circle_number(2) }}Please go to
https://www.medicare.gov/account/login?utm_source=TEXT, {{circle_number(3) }}log in to your account, and
click “My
Account Information” to verify that your address is correct. If you are having difficulty logging in,
@@ -103,22 +102,5 @@
] %}
{% with card_contents=card_contents, text_align='left' %}{% include "components/guidance/cards.html" %}{%
endwith %}
<!-- <ul class="usa-card-group">
{% for item in card_contents %}
<li class="usa-card tablet-lg:grid-col-4 widescreen:grid-col-4">
<div class="usa-card__container">
<div class="usa-card__header">
<h4 class="usa-card__heading">{{item.card_heading}}</h4>
</div>
<div class="usa-card__body">
<p>
{{item.p_text |safe}}
</p>
</div>
</div>
</li>
{% endfor %}
</ul> -->
</section>
{% endblock %}