mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-26 17:24:23 -04:00
Show a tour when users first create a service
This commit adds a 3 screen tour, similar to those used on GOV.UK Verify and Passports. We guerilla tested this on Friday, and it really helped users to build a mental model of how Notify works, so that when they’re playing around with it they have a greater sense of what they’re aiming to do. This makes concepts like templates and placeholders click more quickly. https://www.pivotaltracker.com/story/show/116710119
This commit is contained in:
Chris Hill-Scott
@@ -5,26 +5,26 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{% if not templates and current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], any_=True) %}
|
||||
{% include 'views/dashboard/get-started.html' %}
|
||||
{% elif service.restricted %}
|
||||
<div class="dashboard">
|
||||
{% include 'views/dashboard/trial-mode-banner.html' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if service.restricted %}
|
||||
{% include 'views/dashboard/trial-mode-banner.html' %}
|
||||
{% endif %}
|
||||
|
||||
{% if not templates and current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], any_=True) %}
|
||||
{% include 'views/dashboard/get-started.html' %}
|
||||
{% endif %}
|
||||
|
||||
{% if templates %}
|
||||
<div
|
||||
data-module="update-content"
|
||||
data-resource="{{url_for(".service_dashboard_updates", service_id=service_id)}}"
|
||||
data-key="today"
|
||||
data-interval-seconds="10"
|
||||
>
|
||||
{% include 'views/dashboard/today.html' %}
|
||||
</div>
|
||||
<div
|
||||
data-module="update-content"
|
||||
data-resource="{{url_for(".service_dashboard_updates", service_id=service_id)}}"
|
||||
data-key="today"
|
||||
data-interval-seconds="10"
|
||||
>
|
||||
{% include 'views/dashboard/today.html' %}
|
||||
</div>
|
||||
|
||||
{% include 'views/dashboard/jobs.html' %}
|
||||
{% endif %}
|
||||
{% include 'views/dashboard/jobs.html' %}
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,30 +1,23 @@
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
|
||||
<h2 class="heading-medium">Get started</h2>
|
||||
{% if current_user.has_permissions(['manage_templates']) %}
|
||||
<p>
|
||||
You need to set up a template before you can send messages
|
||||
</p>
|
||||
<ol class="grid-row">
|
||||
<li class="column-half">
|
||||
{% call banner_wrapper(type="tip") %}
|
||||
<a href='{{ url_for(".add_service_template", service_id=service_id, template_type="sms") }}' style="white-space: nowrap;">
|
||||
Set up a text message template
|
||||
</a>
|
||||
{% endcall %}
|
||||
</li>
|
||||
<li class="column-half">
|
||||
{% call banner_wrapper(type="tip") %}
|
||||
<a href='{{ url_for(".add_service_template", service_id=service_id, template_type="email") }}'>
|
||||
Set up an email template
|
||||
</a>
|
||||
{% endcall %}
|
||||
</li>
|
||||
</ol>
|
||||
{% call banner_wrapper(type='tour') %}
|
||||
<h2 class="heading-large">You’re ready to get started</h2>
|
||||
<p>
|
||||
<a href='{{ url_for(".add_service_template", service_id=service_id, template_type="sms") }}'>
|
||||
Set up a text message template
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href='{{ url_for(".add_service_template", service_id=service_id, template_type="email") }}'>
|
||||
Set up an email template
|
||||
</a>
|
||||
</p>
|
||||
{% endcall %}
|
||||
{% else %}
|
||||
<p>
|
||||
{% call banner_wrapper(type='mode') %}
|
||||
<p>
|
||||
You need to ask your service manager to set up some templates before you can send messages
|
||||
</p>
|
||||
</p>
|
||||
{% endcall %}
|
||||
{% endif %}
|
||||
|
||||
@@ -2,24 +2,12 @@
|
||||
{% from "components/big-number.html" import big_number %}
|
||||
|
||||
{% call banner_wrapper(type="mode") %}
|
||||
|
||||
<h2 class="heading-medium">Trial mode</h2>
|
||||
<div class="grid-row">
|
||||
<div class="column-one-half">
|
||||
<p>
|
||||
We’ll only deliver messages to you and members of your team
|
||||
<br>
|
||||
<a href="{{ url_for(".help", _anchor="trial-mode") }}">Find out more</a>
|
||||
</p>
|
||||
Your service is in trial mode
|
||||
</div>
|
||||
<div class="column-one-sixth">
|
||||
|
||||
</div>
|
||||
<div class="column-one-third">
|
||||
{{ big_number(
|
||||
service.limit - statistics.get('emails_requested', 0) - statistics.get('sms_requested', 0),
|
||||
'messages left today'
|
||||
) }}
|
||||
<div class="column-one-half">
|
||||
<a href="{{ url_for(".help", _anchor="trial-mode") }}" class="banner-mode-action">Find out more</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
25
app/templates/views/tour/1.html
Normal file
25
app/templates/views/tour/1.html
Normal file
@@ -0,0 +1,25 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
|
||||
{% block page_title %}
|
||||
{{heading}} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{% call banner_wrapper(type='tour') %}
|
||||
<h2 class="heading-large">Trial mode</h2>
|
||||
<p>
|
||||
To start off with, you can only send messages to yourself.
|
||||
</p>
|
||||
<p>
|
||||
We can remove these restrictions when you’re ready.
|
||||
</p>
|
||||
<a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
|
||||
Next
|
||||
</a>
|
||||
{% endcall %}
|
||||
|
||||
{% endblock %}
|
||||
29
app/templates/views/tour/2.html
Normal file
29
app/templates/views/tour/2.html
Normal file
@@ -0,0 +1,29 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
|
||||
{% block page_title %}
|
||||
{{heading}} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{% call banner_wrapper(type='tour') %}
|
||||
<h2 class="heading-large">Start with templates</h2>
|
||||
<p>
|
||||
Set up a template like this:
|
||||
</p>
|
||||
<p>
|
||||
<img
|
||||
src="/static/images/tour/{{ current_page }}.png"
|
||||
width="554" height="97"
|
||||
alt="A template for a text message with placeholders for the recipients name, document and date"
|
||||
>
|
||||
</p>
|
||||
<a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
|
||||
Next
|
||||
</a>
|
||||
{% endcall %}
|
||||
|
||||
{% endblock %}
|
||||
32
app/templates/views/tour/3.html
Normal file
32
app/templates/views/tour/3.html
Normal file
@@ -0,0 +1,32 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
|
||||
{% block page_title %}
|
||||
{{heading}} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{% call banner_wrapper(type='tour') %}
|
||||
<h2 class="heading-large">Add recipients</h2>
|
||||
<p>
|
||||
Add recipients by uploading a .csv spreadsheet:
|
||||
</p>
|
||||
<p>
|
||||
<img
|
||||
src="/static/images/tour/{{ current_page }}.png"
|
||||
width="554" height="118"
|
||||
alt="A screenshot of a spreadsheet containing data about three people"
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
Developers, you can add data automatically using an API
|
||||
</p>
|
||||
<a href='{{ url_for('.tour', service_id=service_id, page=next_page) }}'>
|
||||
Next
|
||||
</a>
|
||||
{% endcall %}
|
||||
|
||||
{% endblock %}
|
||||
28
app/templates/views/tour/4.html
Normal file
28
app/templates/views/tour/4.html
Normal file
@@ -0,0 +1,28 @@
|
||||
{% extends "withoutnav_template.html" %}
|
||||
{% from "components/textbox.html" import textbox %}
|
||||
{% from "components/page-footer.html" import page_footer %}
|
||||
{% from "components/banner.html" import banner_wrapper %}
|
||||
|
||||
{% block page_title %}
|
||||
{{heading}} – GOV.UK Notify
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
|
||||
{% call banner_wrapper(type='tour') %}
|
||||
<h2 class="heading-large">Send your messages</h2>
|
||||
<p>
|
||||
Notify merges your data with the template and sends the messages
|
||||
</p>
|
||||
<a href="{{ url_for('.service_dashboard', service_id=service_id) }}">
|
||||
Next
|
||||
</a>
|
||||
<img
|
||||
src="/static/images/tour/{{ current_page }}.png"
|
||||
class="banner-tour-image-flush-bottom"
|
||||
width="840" height="290"
|
||||
alt="Three mobiles phones, each showing a text message personalised with data about the recipient"
|
||||
>
|
||||
{% endcall %}
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user