guidance content

app/assets/images/phone_grey.svg

@@ -0,0 +1,5 @@
+<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" />
+</svg>

app/main/views/index.py

@@ -186,7 +186,7 @@ def trial_mode_new():
 @user_is_logged_in
 def guidance():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/guidance.html",
         navigation_links=guidance_nav(),
     )
 
@@ -195,7 +195,7 @@ def guidance():
 @user_is_logged_in
 def clear_goals():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/clear-goals.html",
         navigation_links=guidance_nav(),
     )
 
@@ -204,7 +204,7 @@ def clear_goals():
 @user_is_logged_in
 def rules_and_regulations():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/rules-and-regulations.html",
         navigation_links=guidance_nav(),
     )
 
@@ -222,7 +222,7 @@ def establish_trust():
 @user_is_logged_in
 def write_for_action():
     return render_template(
-        "views/guidance/index.html",
+        "views/guidance/write-for-action.html",
         navigation_links=guidance_nav(),
         title="Write For Action",
     )

app/templates/components/guidance/circle_number.html

@@ -0,0 +1,9 @@
+{% 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"
+        dy=".35em">
+        {{ number }}
+    </text>
+</svg>
+{% endmacro %}

app/templates/views/guidance/establish-trust.html

@@ -0,0 +1,188 @@
+{% extends "base.html" %}
+{% from "components/guidance/circle_number.html" import circle_number %}
+
+{% set page_title = "Establish Trust" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{% with title=page_title %}{% include "components/guidance/nav_breadcrumb.html" %}{% endwith %}
+<section class="usa-prose">
+  <h1>Establish Trust</h1>
+  <p class="usa-intro text-base">Help your audience anticipate and welcome your texts.</p>
+  <p>
+    People are wary of texts they’re not expecting to receive. Before you send your first text, consider how you will
+    gain trust with your audience and address any concerns of spam. Seize specific moments to reinforce what your
+    audience should expect from your messages.
+  </p>
+  <h2 id="get-the-word-out">Get the word out</h2>
+  <p>Before you launch, let your audience know you are adding texting as a communication method. People are more likely
+    to trust your text once they get it if they know that your program is sending texts.</p>
+
+  <p>How you currently communicate with your audience will determine the best approaches to announce your new
+    initiative. Harness channels you’re already using like social media, public websites, mailing inserts, or fliers at
+    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>
+  <p class="padding-bottom-2">To reinforce legitimacy, include these key messages in your outreach:</p>
+
+  <ul class="usa-card-group flex-1 flex-wrap">
+    <li class="flex-1 width-full height-full padding-bottom-2">
+      <div class="usa-card__container border-0">
+        <ol class="guidance-list">
+          <li><b>Introduce yourself</b> – Give people time to get to know your texting communications before you need
+            direct
+            action from them</li>
+          <li><b>Phone number</b> – Note the sending phone number your texts will come from</li>
+          <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
+            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
+          </li>
+        </ol>
+      </div>
+    </li>
+    <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">
+          <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
+              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>
+          </p>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <hr>
+  <h2 id="as-people-receive-texts">As people receive texts</h2>
+  <p>When a person has questions or needs assistance, reaching out for support may be natural for them. Give direction
+    in your texts so your audience understands what to do with the information you provide. Remember, it’s important to
+    repeat consistent and standardized language across texts and programs.</p>
+  <h3 class="guidance">Be trustworthy</h3>
+  <ul class="usa-card-group flex-1 flex-wrap">
+    <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>
+        </ol>
+      </div>
+    </li>
+    <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">
+            {{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"
+              rel="application.yourstate.gov">https://www.application.yourstate.gov</a> or {{circle_number(10) }}
+            <b>call the number on the back</b> of your Medicaid card.
+          </p>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <p class="text-center">For example, we’ve seen Medicaid programs use trust-markers in renewal texts –</p>
+
+  <h3 class="guidance">Provide helpful auto-responses</h3>
+  <ul class="usa-card-group flex-1 flex-wrap">
+    <li class="flex-1 width-full height-full padding-bottom-2">
+      <div class="usa-card__container border-0">
+        <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>
+        </ol>
+      </div>
+    </li>
+    <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">
+          <p class="text-center">Don’t forget about using auto-response text</p>
+          <p class="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
+            to opt out of receiving texts, and “START” to opt back in.
+          </p>
+        </div>
+      </div>
+    </li>
+  </ul>
+
+  <h2>Be prepared for questions</h2>
+  <p>
+    Your texting program will only be perceived as legitimate if you get the word out in many different ways. It's also
+    important that agency employees who support text recipients (for example, the call center) are familiar with the
+    texting program. They can accurately respond to recipient questions about them, so make sure you’re priming your
+    delivery staff, especially those who interact directly with your intended audience.
+  </p>
+
+  {% set card_header = "Harness trusted communication channels" %}
+  {% set card_contents = [
+  {
+  "image_src": asset_url('img/usa-icons/close.svg'),
+  "card_heading": "Websites",
+  "p_text": "Post banner alerts about texting on your agency website, and link to a press release for more information.
+  Publish apublic texting privacy policy.",
+  },
+  {
+  "image_src": asset_url('img/usa-icons/close.svg'),
+  "card_heading": "Community organizations",
+  "p_text": "Alert trusted community-based organizations that texts are coming and what they look like. Equip them with
+  fliers, posters, and talking points to spread the word",
+  },
+  {
+  "image_src": asset_url('img/usa-icons/close.svg'),
+  "card_heading": "IVR / Call Centers",
+  "p_text": "Consider adding hold message announcements about your texting initiative to further get the word out.",
+  },
+  ] %}
+
+  {% with card_header=card_header, card_contents=card_contents %}{% include "components/guidance/cards.html" %}{%
+  endwith %}
+
+  {% set card_header = "Prepare your team" %}
+  {% set card_contents = [
+  {
+  "image_src": asset_url('img/usa-icons/close.svg'),
+  "card_heading": "Staff",
+  "p_text": "Give all staff a heads-up about texts before and when they are sent.
+  Share talking points on what texts you’re sending, when you’ll start to send them, the phone number they are coming
+  from, and where staff can escalate any issues.",
+  },
+  {
+  "image_src": asset_url('img/usa-icons/close.svg'),
+  "card_heading": "Case management systems",
+  "p_text": "When it makes sense, include information about texts being sent to specific clients on individual splash
+  pages or
+  within case management notes.",
+  },
+  ] %}
+  {% with card_header=card_header, card_contents=card_contents %}{% include "components/guidance/cards.html" %}{%
+  endwith %}
+</section>
+{% endblock %}

app/templates/views/guidance/write-for-action.html

@@ -0,0 +1,105 @@
+{% extends "base.html" %}
+{% from "components/guidance/circle_number.html" import circle_number %}
+
+{% set page_title = "Establish Trust" %}
+
+{% block per_page_title %}
+{{page_title}}
+{% endblock %}
+
+{% block content_column_content %}
+{% with title=page_title %}{% include "components/guidance/nav_breadcrumb.html" %}{% endwith %}
+<section class="usa-prose">
+  <h1>Write texts that provoke action</h1>
+  <p class="usa-intro text-base"> Help your audience know what to do with the information you send.</p>
+
+  <p>
+    When writing a text, focus on the person who is going to receive the message and write it for them. Use plain
+    language
+    and provide easy to understand next steps.
+  </p>
+
+  <p>When deciding what types of messages to draft for your campaign, think through the following questions:</p>
+  <ul>
+    <li>What do you want recipients to do when they receive the text?</li>
+    <li>What will happen if a recipient doesn't take the action you want them to take?</li>
+    <li>Will you send any follow-up texts depending on if the action was taken or not?</li>
+  </ul>
+  <h2>Be clear and concise</h2>
+  <ul>
+    <li>Use simple, everyday language. Keep the text short and clear. Stay under 300 characters.</li>
+    <li>
+      Say only one important thing per message. Focus on the most essential instructions and information. If there are
+      multiple actions you want someone to take, consider sending a series of well-timed messages.
+    </li>
+    <li>Use a neutral, direct, and professional tone. This works better than a friendly or overly casual tone.</li>
+  </ul>
+  <h2>Build conditions for action</h2>
+  <ul>
+    <li>Clearly state the information and the response you want the recipient to take.</li>
+    <li>Point directly to where the action can be completed, not to more information.</li>
+    <li>Make sure the action can be completed via mobile phone, like calling a person or going to a mobile-friendly URL.
+    </li>
+    <li>
+      Include at least two options for a recipient to take action. Some recipients may be more comfortable talking
+      directly
+      to a person, while others may prefer a web-based experience.
+    </li>
+    <li>Consider clearly explaining any consequences if the desired action is not completed.</li>
+  </ul>
+
+  <p>For example, getting a person to update their mailing address:</p>
+  <ul class="usa-card-group flex-1 flex-wrap">
+    <li class="flex-1 width-full height-full padding-bottom-2">
+      <div class="usa-card__container border-0">
+        <ol class="guidance-list">
+          <li><b>Introduce yourself</b> – Give people time to get to know your texting communications before you need
+            direct
+            action from them</li>
+          <li><b>Phone number</b> – Note the sending phone number your texts will come from</li>
+          <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
+            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
+          </li>
+        </ol>
+      </div>
+    </li>
+    <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">
+          <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
+              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>
+          </p>
+        </div>
+      </div>
+    </li>
+  </ul>
+  <p>
+    State Medicare Agency: Hello, MEDICARE has attempted to send you an update about your claim, but the mail was
+    returned. Please go to https://www.medicare.gov/account/login?utm_source=TEXT, log in to your account, and click “My
+    Account Information” to verify that your address is correct. If you are having difficulty logging in, call
+    1-800-MEDICARE for assistance. We will attempt to send the mail again in 14 days.
+  </p>
+  <h2>What provoking action looks like</h2>
+  <p>Feeling a sense of ownership can influence behavior.<br>
+    Example – <b>Don't miss this chance to get free internet</b> or $30 per month off your internet bill.</p>
+
+  <p>Individuals are strongly influenced by others’ behaviors.<br>Example – <b>Thousands of residents</b> already get an
+    average of $113/month in money for food.</p>
+
+  <p>Individuals perceive losses more powerfully than gains.<br>Example – Contact us for potentially unclaimed free
+    internet services <b>that belong to you</b>.</p>
+</section>
+{% endblock %}