Picture of Adding user instructions to MegaEdit | ID:ME_025

Adding user instructions to MegaEdit | ID:ME_025

At Infigo, we have worked hard to make MegaEdit an intuitive and easy to use product. However it's always possible that your end users could benefit from a little extra help in how to use your carefully customised product and user experience, which have the potential to be incredibly intricate. In this tutorial, we will explore how to add instructions and additional hints to the MegaEdit interface, allowing you to give your end users the support they need to have a positive experience with your products.

Tutorial Video Transcript

A transcript of our tutorial video, ensuring you can find exactly what you need, when you need it.

You can search this page to find the relevant time-stamp in the video. Also, this text can be used as part of the tutorial search feature.

00:00:13:24 - 00:00:14:19
A-Team figure.

00:00:14:19 - 00:00:18:24
We've worked hard to make MegaEdits,
an intuitive and easy to use product.

00:00:19:17 - 00:00:23:00
However, it's always possible
that your end user could benefit

00:00:23:00 - 00:00:24:18
from a little extra help

00:00:24:18 - 00:00:28:11
in how to use your carefully
customized product and user experience.

00:00:28:24 - 00:00:31:21
After all, these do have the potential
to be incredibly intricate.

00:00:33:05 - 00:00:34:21
In this tutorial, we'll explore

00:00:34:21 - 00:00:37:24
how to add instructions
and add additional hints

00:00:38:01 - 00:00:42:27
to your MegaEdit interface, allowing you
to give your end user the support

00:00:42:28 - 00:00:47:25
they need to have a positive experience
with your products.

00:00:48:27 - 00:00:51:19
So the first thing we're going to do
is to actually enable

00:00:51:19 - 00:00:56:11
some of this functionality starting off
in your MegaEdit product screen.

00:00:57:07 - 00:01:01:19
Edit One of your converted products.

00:01:03:09 - 00:01:05:15
Next, go across to the instruction tab

00:01:07:24 - 00:01:10:07
and make sure that you have this one
selected.

00:01:10:08 - 00:01:15:15
So Catfish dot editor dot
instructional panel.

00:01:15:15 - 00:01:16:28
This option enables a pop up.

00:01:16:28 - 00:01:20:21
When the MegaEdit editor is launched
into which administrators

00:01:20:21 - 00:01:24:02
can craft instructions
for their end users.

00:01:25:03 - 00:01:25:25
The instructions

00:01:25:25 - 00:01:28:26
themselves are controlled
by an editable content block.

00:01:29:11 - 00:01:31:29
So first, make sure that this is enabled
and hit save

00:01:33:00 - 00:01:35:06
and then navigate to your editable content

00:01:35:06 - 00:01:37:11
area.

00:01:38:23 - 00:01:42:25
The content what we're looking for
is in section three where you can see

00:01:42:25 - 00:01:47:17
there's a whole section to do
with the Infigo editor and MegaEdit.

00:01:47:17 - 00:01:50:17
The one we're looking for here
is the Infigo editor

00:01:50:17 - 00:01:53:17
instructional panel.

00:01:58:26 - 00:02:02:13
Now, what you are likely to be faced with

00:02:02:13 - 00:02:05:08
is a rich editor format
with a few instructions

00:02:05:08 - 00:02:09:06
written in this panel, slightly different
from the ones I've got written in here.

00:02:10:28 - 00:02:13:09
Once they're in there by default,
a very basic

00:02:13:19 - 00:02:17:17
and they can be completely customized.

00:02:19:09 - 00:02:21:11
Any of these three body text

00:02:21:11 - 00:02:24:19
editor types
can be used to craft your instructions.

00:02:25:05 - 00:02:29:03
So the rich editor
that will give you a word processor

00:02:29:03 - 00:02:30:03
style format.

00:02:30:03 - 00:02:34:22
So that allows you to build your instructions and directly format them in line.

00:02:36:01 - 00:02:36:28
You can also include

00:02:36:28 - 00:02:39:06
things such as pictures or hyperlinks

00:02:39:29 - 00:02:44:17
as part of the instructions,
using the rich editor.

00:02:45:08 - 00:02:48:19
The Code Mirror
editor allows you to write in general code

00:02:48:19 - 00:02:51:24
if you've got the skill set to do so.

00:02:52:01 - 00:02:54:27
And finally,
we have the content templates editor.

00:02:55:15 - 00:02:57:21
So content templates
allow you to construct

00:02:58:00 - 00:03:01:07
HTML code using easy to use content blocks

00:03:01:16 - 00:03:04:29
so you don't actually have to interact
with the HTML code at all.

00:03:06:00 - 00:03:08:29
We will be going into that
in too much detail in this tutorial,

00:03:09:06 - 00:03:12:17
but they have been covered
in a lot of detail in previous tutorials.

00:03:13:01 - 00:03:15:18
So please
just take a search for content templates

00:03:16:00 - 00:03:19:29
and you'll find those appropriate
resources.

00:03:23:07 - 00:03:26:08
I'm of the opinion that content templates
are always a great option

00:03:26:08 - 00:03:29:18
to use,
and I have a pre constructed example here

00:03:30:08 - 00:03:33:28
which contains a few basic elements
just to demonstrate the functionality.

00:03:35:13 - 00:03:37:06
So I have a title,

00:03:37:22 - 00:03:40:24
I have
some text in the form of a paragraph,

00:03:40:24 - 00:03:45:09
and I've got an embedded section
which allows me to embed in this case

00:03:45:15 - 00:03:49:11
a video that's hosted on YouTube.

00:03:51:23 - 00:03:52:19
Just a side note

00:03:52:19 - 00:03:56:08
that most of the content template
functionality will work in this manner.

00:03:56:22 - 00:04:00:14
However, some features of it,
such as the ability to add a slider

00:04:00:25 - 00:04:05:09
may not function when you actually view
in the instructional panel inside mega.

00:04:05:09 - 00:04:07:11
Edit.

00:04:09:28 - 00:04:11:16
Once you've crafted your instructions,

00:04:11:16 - 00:04:14:05
click save and continue

00:04:15:08 - 00:04:16:22
and then we're going to relaunch

00:04:16:22 - 00:04:18:05
or launch our product.

00:04:18:25 - 00:04:21:08
So now upon launching the MegaEdit editor,

00:04:22:08 - 00:04:26:07
a box like this will appear which shows
you your contained instructions

00:04:26:20 - 00:04:29:05
and any additional resources
that you specified.

00:04:30:06 - 00:04:31:15
So you can see we've got our header,

00:04:32:27 - 00:04:36:04
our paragraph
of information and an embedded video

00:04:36:04 - 00:04:38:20
which can be played from within
the instruction panel

00:04:44:02 - 00:04:46:25
uses do have the ability
to not show this pop up again

00:04:46:25 - 00:04:52:22
if they don't want it launching
every time they launch, the editor.

00:04:53:07 - 00:04:54:21
Next, we'll show how to apply

00:04:54:21 - 00:04:57:27
some hints to the MegaEdit loading screen.

00:04:58:12 - 00:05:01:19
So first, we're going to navigate
to one of our editable

00:05:01:19 - 00:05:03:20
content blocks

00:05:04:19 - 00:05:07:08
again in Section three.

00:05:07:08 - 00:05:09:19
And this one is called MegaEdit loading

00:05:09:19 - 00:05:12:12
screen hits.

00:05:15:03 - 00:05:15:23
So if I go ahead

00:05:15:23 - 00:05:23:16
and edit this one,
so you will see something

00:05:23:19 - 00:05:27:14
slightly different to what I've got here
because this has been pre adjusted

00:05:27:24 - 00:05:29:24
on this particular storefront,

00:05:29:24 - 00:05:30:22
but you will see things

00:05:30:22 - 00:05:34:23
in the same format, so you'll see
a bulleted list of potential hints

00:05:35:10 - 00:05:40:03
and what it's going to do with these
inputs is choose one of those hints

00:05:40:14 - 00:05:43:27
and then demonstrate our display
that's on the loading screen

00:05:43:27 - 00:05:45:07
of the MegaEdit editor.

00:05:46:10 - 00:05:46:18
So you

00:05:46:18 - 00:05:49:11
can add as many hints
as you can here for it to pick between

00:05:49:19 - 00:05:53:04
as long as they're in this format
where each one is a bulleted point.

00:05:54:21 - 00:05:56:16
So for example, if I add an additional one

00:05:56:16 - 00:05:58:17
to the end of our list

00:06:01:08 - 00:06:02:15
and then I'm going to reload.

00:06:02:15 - 00:06:03:21
The editor

00:06:06:04 - 00:06:07:01
and we'll see a

00:06:07:01 - 00:06:11:05
one of those selected hints showing at the
bottom of the loading screen.

 

Incomplete