darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-06-18 04:06:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

revised content phone content

Browse Source
This commit is contained in:
Beverly Nguyen
2024-10-02 09:52:44 -07:00
parent 4eff686e17
commit cecfeb7441
7 changed files with 58 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/images/phone_grey.svg
View File

@@ -1,5 +1,3 @@
<svg viewBox="0 0 563 670" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M480.282 0C506.922 0 526.48 15.1615 539 32.8585C551.388 50.3684 557.803 71.5515 557.803 86.5178V336.165C557.943 336.136 558.088 336.122 558.236 336.122H560.835C562.031 336.122 563 337.09 563 338.285V420.476C563 421.671 562.031 422.639 560.835 422.639H558.236C558.088 422.639 557.943 422.624 557.803 422.596V959.482C557.803 974.449 551.388 995.632 539 1013.14C526.48 1030.84 506.922 1046 480.282 1046H82.7177C56.0784 1046 36.5197 1030.84 23.9997 1013.14C11.6121 995.632 5.19692 974.449 5.19692 959.482V422.596C5.05699 422.624 4.91216 422.639 4.76385 422.639H2.16538C0.969476 422.639 0 421.671 0 420.476V359.914C0 358.719 0.969476 357.751 2.16538 357.751H4.76385C4.91216 357.751 5.05699 357.766 5.19692 357.794V349.056C5.05699 349.084 4.91216 349.099 4.76385 349.099H2.16538C0.969476 349.099 0 348.131 0 346.936V286.374C0 285.179 0.969476 284.211 2.16538 284.211H4.76385C4.91216 284.211 5.05699 284.226 5.19692 284.254V262.538C5.05699 262.567 4.91216 262.581 4.76385 262.581H2.16538C0.969476 262.581 0 261.613 0 260.419V221.486C0 220.291 0.969476 219.323 2.16538 219.323H4.76385C4.91216 219.323 5.05699 219.337 5.19692 219.366V86.5178C5.19692 71.5515 11.6121 50.3684 23.9997 32.8585C36.5197 15.1615 56.0784 0 82.7177 0H480.282ZM38.1469 42.8446C27.5814 57.7789 22.52 75.5288 22.52 86.5178V959.482C22.52 970.471 27.5814 988.221 38.1469 1003.16C48.5799 1017.9 63.4508 1028.7 82.7177 1028.7H480.282C499.549 1028.7 514.42 1017.9 524.853 1003.16C535.419 988.221 540.48 970.471 540.48 959.482V86.5178C540.48 75.5288 535.419 57.7789 524.853 42.8446C514.42 28.0974 499.549 17.3036 480.282 17.3036H402.762V43.2589C402.762 50.4263 396.945 56.2366 389.769 56.2366H173.231C166.055 56.2366 160.238 50.4263 160.238 43.2589V17.3036H82.7177C63.4508 17.3036 48.5799 28.0974 38.1469 42.8446Z"
fill="#DFE1E2" />
<path d="M553.831 334.751V335.974L555.03 335.731C555.104 335.716 555.181 335.708 555.262 335.708H557.846C558.483 335.708 559 336.224 559 336.862V418.708C559 419.345 558.483 419.862 557.846 419.862H555.262C555.181 419.862 555.104 419.853 555.03 419.838L553.831 419.595V420.818V955.446C553.831 970.12 547.528 991.015 535.312 1008.3C522.978 1025.76 503.794 1040.6 477.723 1040.6H82.2769C56.206 1040.6 37.022 1025.76 24.6885 1008.3C12.472 991.015 6.16923 970.12 6.16923 955.446V420.818V419.595L4.97026 419.838C4.89621 419.853 4.8188 419.862 4.73846 419.862H2.15385C1.51659 419.862 1 419.345 1 418.708V358.4C1 357.763 1.51659 357.246 2.15385 357.246H4.73846C4.8188 357.246 4.89621 357.254 4.97026 357.269L6.16923 357.513V356.289V347.588V346.364L4.97026 346.608C4.89621 346.623 4.8188 346.631 4.73846 346.631H2.15385C1.51659 346.631 1 346.114 1 345.477V285.169C1 284.532 1.51659 284.015 2.15385 284.015H4.73846C4.8188 284.015 4.89621 284.023 4.97026 284.038L6.16923 284.282V283.058V261.434V260.21L4.97026 260.454C4.89621 260.469 4.8188 260.477 4.73846 260.477H2.15385C1.51659 260.477 1 259.96 1 259.323V220.554C1 219.917 1.51659 219.4 2.15385 219.4H4.73846C4.8188 219.4 4.89624 219.408 4.97036 219.423L6.16923 219.666V218.443V86.1538C6.16923 71.4804 12.472 50.5848 24.6885 33.2974C37.022 15.8443 56.206 1 82.2769 1H477.723C503.794 1 522.978 15.8443 535.312 33.2974C547.528 50.5848 553.831 71.4804 553.831 86.1538V334.751ZM400.615 16.2308H399.615V17.2308V43.0769C399.615 49.6619 394.277 55 387.692 55H172.308C165.723 55 160.385 49.6619 160.385 43.0769V17.2308V16.2308H159.385H82.2769C62.6883 16.2308 47.6257 27.2304 37.1269 42.0872C26.5125 57.1076 21.4 74.9813 21.4 86.1538V955.446C21.4 966.619 26.5125 984.492 37.1269 999.513C47.6257 1014.37 62.6883 1025.37 82.2769 1025.37H477.723C497.312 1025.37 512.374 1014.37 522.873 999.513C533.487 984.492 538.6 966.619 538.6 955.446V86.1538C538.6 74.9813 533.488 57.1076 522.873 42.0872C512.374 27.2304 497.312 16.2308 477.723 16.2308H400.615Z" stroke="black" stroke-width="2"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@@ -699,7 +699,7 @@ ol.guidance-list li {
ol.guidance-list li::before {
content: counter(item);
background-color: #000;
background-color: #005ea2;
color: white;
width: 32px;
height: 32px;
@@ -813,3 +813,21 @@ img.guidance_card_img {
height: auto;
margin: 0 auto;
}
.svg-circle-icon {
display: inline-block;
margin: 0;
padding: 0;
vertical-align: text-bottom;
margin-right: -2px;
}
.height-phone-lg {
max-height: 500px;
}
@media (max-width: 758px) {
.guidance-flex-container {
flex-direction: column;
}
}

6
app/templates/components/guidance/circle_number.html
View File

@@ -1,7 +1,7 @@
{% macro circle_number(number) %}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" stroke="black" stroke-width="4" fill="none" />
<text x="50%" y="50%" text-anchor="middle" font-size="50" font-weight="bold" fill="black" font-family="Arial"
<svg xmlns="http://www.w3.org/2000/svg" class="svg-circle-icon" width="24" height="24" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="37" stroke="#005ea2" stroke-width="7" fill="none" />
<text x="50%" y="50%" text-anchor="middle" font-size="40" font-weight="bolder" fill="#005ea2" font-family="Arial"
dy=".35em">
{{ number }}
</text>

138
app/templates/views/guidance/benchmark-performance.html
View File

@@ -23,72 +23,23 @@
delivered, how people engage with messages, and how they take action.
</p>
<h3>Message delivery</h3>
<p class="text-bold">Benchmark: 80% of texts are successfully delivered</p>
<svg width="200" height="200" viewBox="0 0 36 36">
<!-- Background circle -->
<path stroke="#e0e0e0" stroke-width="3.8" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Progress circle -->
<path stroke="#005EA2" stroke-width="3.8" stroke-dasharray="80, 100" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Percentage Text -->
<text x="18" y="20.35" font-size="7" text-anchor="middle" fill="#005EA2">80%</text>
</svg>
<caption>this is a placeholder image for now</caption>
<p class="font-body-lg text-light">Benchmark: <span class="text-bold">80%</span> of texts are successfully delivered</p>
<p>
You may discover that some numbers are temporarily or permanently unavailable due to service being discontinued,
numbers changing, or being a landline.
</p>
<h3>Engagement</h3>
<p class="text-bold">Benchmark: Engagement rates with texts ranged from 17% to 26%</p>
<svg width="200" height="200" viewBox="0 0 36 36">
<!-- Background circle -->
<path stroke="#e0e0e0" stroke-width="3.8" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Progress circle -->
<path stroke="#005EA2" stroke-width="3.8" stroke-dasharray="80, 100" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Percentage Text -->
<text x="18" y="20.35" font-size="7" text-anchor="middle" fill="#005EA2">80%</text>
</svg>
<caption>this is a placeholder image for now</caption>
<p class="font-body-lg text-light">Benchmark: Engagement rates with texts ranged from <span class="text-bold">17%</span>
to <span class="text-bold">26%</span></p>
<p>
The highest rate of engagement with a text comes within hours of sending. Engagement rates include any kind of
action
taken due to a text, including replying “STOP” to prevent future texts.
action taken due to a text, including replying “STOP” to prevent future texts.
</p>
<h3>Appointment requests</h3>
<p class="text-bold">Benchmark: Requesting appointments after receiving texts ranged from 4% to 9%</p>
<svg width="200" height="200" viewBox="0 0 36 36">
<!-- Background circle -->
<path stroke="#e0e0e0" stroke-width="3.8" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Progress circle -->
<path stroke="#005EA2" stroke-width="3.8" stroke-dasharray="80, 100" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Percentage Text -->
<text x="18" y="20.35" font-size="7" text-anchor="middle" fill="#005EA2">80%</text>
</svg>
<caption>this is a placeholder image for now</caption>
<p class="font-body-lg text-light">Benchmark: Requesting appointments after receiving texts ranged from <span
class="text-bold">4%</span> to <span class="text-bold">9%</span></p>
<p>
Requesting appointments is a specific type of engagement. Provide a phone number or link to an online appointment
request form.
@@ -99,83 +50,24 @@
document submission, and maintenance reminders.
</p>
<h3>Appointment reminders</h3>
<p class="text-bold">Benchmark: Clients were 79% more likely to keep their appointment after receiving a text
reminder.</p>
<svg width="200" height="200" viewBox="0 0 36 36">
<!-- Background circle -->
<path stroke="#e0e0e0" stroke-width="3.8" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Progress circle -->
<path stroke="#005EA2" stroke-width="3.8" stroke-dasharray="80, 100" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Percentage Text -->
<text x="18" y="20.35" font-size="7" text-anchor="middle" fill="#005EA2">80%</text>
</svg>
<caption>this is a placeholder image for now</caption>
<p class="font-body-lg text-light">Benchmark: Clients were <span class="text-bold">79%</span> more likely to keep their
appointment after receiving a text reminder.</p>
<p>You will likely see more completed appointments.</p>
<p class="text-bold">Benchmark: Clients were 55% more likely to complete an interview after receiving an interview
reminder</p>
<svg width="200" height="200" viewBox="0 0 36 36">
<!-- Background circle -->
<path stroke="#e0e0e0" stroke-width="3.8" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Progress circle -->
<path stroke="#005EA2" stroke-width="3.8" stroke-dasharray="80, 100" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Percentage Text -->
<text x="18" y="20.35" font-size="7" text-anchor="middle" fill="#005EA2">80%</text>
</svg>
<caption>this is a placeholder image for now</caption>
<p class="font-body-lg text-light">Benchmark: Clients were <span class="text-bold">55%</span> more likely to complete an
interview after receiving an interview reminder</p>
<p>You will likely see more completed interviews.</p>
<h3>Document submission</h3>
<p class="text-bold">
Benchmark: Clients were 6% more likely to complete document submission after receiving a customized list of required
documents via text
<p class="font-body-lg text-light">
Benchmark: Clients were <span class="text-bold">6%</span> more likely to complete document submission after receiving
a customized list of required documents via text
</p>
<svg width="200" height="200" viewBox="0 0 36 36">
<!-- Background circle -->
<path stroke="#e0e0e0" stroke-width="3.8" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Progress circle -->
<path stroke="#005EA2" stroke-width="3.8" stroke-dasharray="80, 100" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Percentage Text -->
<text x="18" y="20.35" font-size="7" text-anchor="middle" fill="#005EA2">80%</text>
</svg>
<caption>this is a placeholder image for now</caption>
<p>To encourage response, provide a custom list of the needed documents and information about how to submit them. </p>
<h3>Reminders</h3>
<p class="text-bold">Benchmark: Text reminders improved case maintenance rates by 21%</p>
<svg width="200" height="200" viewBox="0 0 36 36">
<!-- Background circle -->
<path stroke="#e0e0e0" stroke-width="3.8" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Progress circle -->
<path stroke="#005EA2" stroke-width="3.8" stroke-dasharray="80, 100" fill="none" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
<!-- Percentage Text -->
<text x="18" y="20.35" font-size="7" text-anchor="middle" fill="#005EA2">80%</text>
</svg>
<caption>this is a placeholder image for now</caption>
<p class="font-body-lg text-light">Benchmark: Text reminders improved case maintenance rates by <span
class="text-bold">21%</span></p>
<p>You may see less turnover in your case rates.</p>
</section>
{% endblock %}

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

@@ -52,13 +52,13 @@
</div>
</li>
<li class="usa-card flex-1 usa-card--media-right width-full">
<div class="usa-card__container border-0 width-full">
<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-8">
<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="text-center">Department of Social Services: Welcome to text updates from the {{ circle_number(1) }}
<b>State Department of Social Services.</b>{{ circle_number(2) }}<b>We’ll always text you from this
number,</b> save us to your contact list. Our goal is to {{ circle_number(3) }} <b>keep you up to date on
<p class="sms-message-wrapper text-center">Department of Social Services: Welcome to text updates from the
{{circle_number(1)}}<b>State Department of Social Services.</b> {{ circle_number(2) }}<b>We’ll always text you from
this number,</b> save us to your contact list. Our goal is to {{ circle_number(3) }} <b>keep you up to date on
your account status.</b> {{ circle_number(4) }} <b>We will never ask for personal details in a text.</b>
{{ circle_number(5) }} If you have questions about how we protect your privacy, see
state.gov/privacy. <br />{{circle_number(6) }}<b>Reply STOP to stop.</b>
@@ -93,8 +93,8 @@
<li class="usa-card flex-1 usa-card--media-right width-full">
<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-8">
<p class="text-center">
<div class="position-absolute flex text-cener padding-5 padding-top-9">
<p class="sms-message-wrapper text-center">
{{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
href="https://www.application.yourstate.gov" target="_blank"
@@ -103,7 +103,8 @@
</p>
</div>
</div>
<p class="text-center font-sans-xs">For example, we’ve seen Medicaid programs use trust-markers in renewal texts</p>
<p class="text-center font-sans-xs text-italic">For example, we’ve seen Medicaid programs use trust-markers in renewal
texts</p>
</li>
</ul>
@@ -120,9 +121,9 @@
<li class="usa-card flex-1 usa-card--media-right width-full">
<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-8">
<div class="position-absolute flex text-cener padding-5 padding-top-9">
<p class="text-center">Don’t forget about using auto-response text</p>
<p class="text-center">
<p class="sms-message-wrapper text-center">
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
protect your privacy, see state.gov/privacy {{circle_number(12) }} <b>Reply “STOP”</b> to this phone number

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

@@ -30,7 +30,7 @@
},
{
"p_text": 'The <a class="use-link usa-link--external"
href="https://www.federalregister.gov/documents/2021/02/12/2020-29016/government-and-government-contractor-calls-under-the-telephone-consumer-protection-act-of-1991"
href="https://www.fcc.gov/document/fcc-provides-guidance-enable-critical-health-care-coverage-calls"
target="_blank">FCC has ruled</a> that <b>Federal</b> and <b>State</b> programs are exempt from the TCPA and can send
text messages to the public without consent if conducting official business. Without explicit mention in the ruling,
local governments, phone carriers, or any texting intermediaries might require it.'

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

@@ -40,7 +40,7 @@
</ol>
<p>For example, getting a person to update their mailing address:</p>
<ul class="usa-card-group flex-1 flex-wrap padding-top-2">
<ul class="usa-card-group flex-1 flex-wrap padding-top-2 guidance-flex-container">
<li class="flex-1 width-full height-full padding-bottom-2">
<div class="usa-card__container border-0">
<ol class="guidance-list">
@@ -60,9 +60,14 @@
<li class="usa-card flex-1 usa-card--media-right width-full">
<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-8">
<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="text-center">{{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 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, {{circle_number(4) }}call 1-800-MEDICARE for assistance. {{circle_number(5) }}We will attempt to send the mail again in 14 days.{{circle_number(6) }}
<p class="sms-message-wrapper text-center">{{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
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,
{{circle_number(4) }}call 1-800-MEDICARE for assistance. {{circle_number(5) }}We will attempt to send the mail again
in 14 days.{{circle_number(6) }}
</p>
</div>
</div>