Home > Intro to Design Studio

Categories: |


**These features will be live for all new SnapEngage accounts beginning January 4th 2017. If you are a current user and would like these features, please email support@snapengage.com**

 

Here at SnapEngage we are incredibly excited about this new tool. You may have heard about it through the grapevine, or we may have mentioned it to you on chat. Either way, without further ado, we are excited to present to you our new…

Design Studio!

Let’s start with a bit of background. The new Design Studio is a powerful tool that will allow you to create your own chatbox, pre-chat form, and offline form, in addition to the online and offline buttons. No more bothering your designer to create a design for you so that we can implement it, no more limitations on which fields you can have your pre-chat form, whether you want the fields to be required or not… we give you TOTAL FREEDOM to have your chat looking the way you want it to look. You want your chatbox to have a neon purple color? Hey, we don’t judge, go for it! As long as you don’t blame us when your marketing department chases you to tell you the 90’s are over.

Now, how does this design tool work, you say. Well, let’s have a look.

If you click on Settings – Design Studio, you will see that this looks slightly different.

Click on Add Theme or Clone the existing design to get started :

formi1

This will take you to the main menu which will show you how the design will look on a browser (left) and on a mobile device (right)

So, this is what you will see first :

form2

  1. Online button – This will allow you to design what we currently call the “chat button”
  2. Offline button – This will allow you to design the offline button
  3. Chat box – This is the chatbox, what the visitors see when they speak to you
  4. Pre-chat box – If this is enabled, this is where visitors are asked their email, name, etc… before starting a chat
  5. Offline box – This is what visitors will see when you are offline, and they will send an email through this
  6. The name of your design
  7. Don’t forget to save!

———————————————————————————————————————————————|

THE ONLINE & OFFLINE BUTTONS

Create your online and offline buttons. From the menu on the right, you will be able to :

Select the font

(Yes, Comic sans is available! As I mentioned earlier, we don’t judge!)

formfont

Select the type

You will be able to choose between :

TEXT (such as “Chat”), where you will also be able to show borders, choose color, add width of the borders, and round the corners.

redesign1

ICON : Here, we give you 5 different options to choose from :

form5

IMAGE : You want to create your own icon? Go for it! The width and height will be set automatically. We offer the option to adjust the width and height so you can upload an image in 2x the resolution so it looks great on retina screens.

form6

 

Choose the position of the button

This defines where your button will show.

form7

Choose left, right, top or bottom, and then select how far you want it from there.

Choose the color

form8

Now, this is also a good time to add a name and save!

———————————————————————————————————————————————|

THE CHAT BOX

Now, let’s get on with the chat box design!

Color Palette

Do you want to add a color palette that applies a color theme to the whole design (chatbox, pre-chat form and offline form)? Go for it! Simply click on color palette, and select one of the many themes we offer, and a whole theme will be applied.

colorpalette

Font

This is where you select Comic Sans MS the font.

form10

Global Box Settings

form11

The Global Box settings will let you choose the dimensions of the chat box, its position in relation to the screen, it will let you fill the background color, add borders if you wish to do so, round the corners, upload a logo, and remove the SnapEngage logo (this last option will be available on Plus plans or above only).

redesign2

Choose the fill color of the header, the text color, the text, choose whether you want it normal or bold, and the font size, and also the chat icon for the header.

Chat Messages

You can choose the shape of the avatar, and select round, square of rounder corners (where you can select the amount of roundness)

formpic1formpic2formpic3

Then, you can customize the chat text. Choose the agent chat fill and text color, as well as the visitor chat fill and text color. This reflects how the visitor will see the chat boxes. Also, choose the visitor name. The visitor will see the agent’s name, and then “Me” by default, but you can change this to something else.

form15form16

Finally, you can also choose whether you want the picture inside the speech bubble or outside.

form17

Message Input

Here, you will be able to choose the settings for the message box, such as the fill color, the color of the text as it’s typed, and the color and content of the placeholder text (which is what says “Enter your message…”). You can also choose whether you want a border. You can choose the border’s color, thickness and if you want it to have rounded borders.

Call Me

You can choose the text for the Call me button, along with its color, the text color, and borders.

The button will only appear on your form if this feature is also enabled in the settings of your ‘Call Me’ tab, and the connected agent is set up with a number in the ‘Chat Agents’ tab.

callme

———————————————————————————————————————————————|

PRE-CHAT BOX & OFFLINE BOX

Here, you will be able to design what the pre-chat form looks like, but if you want it on, you will still need to activate it under the Design Studio settings :

enableprechat

For Base font and Global box settings and header, see Chatbox.

Field Design

Here, you will be able to select the background color for the fields, the text color (what you type inside the field), the label color (the text that describes the field) and the placeholder color (the text that shows inside the field before you type). You will also be able to add borders, choose the color, the width, and roundness of the corners.

Fields

With the Design Studio tool, you will be able to add fields to the pre-chat and offline forms. This will help you gather the data you want from your visitors, and you can select which fields are required. We do recommend to bear in mind that if you have too many fields (especially required), it may put some people off and they may go away.

form18

The fields you will see on the design (left) are the fields under Active fields (right). You can drag and drop fields by clicking on the dots (see red rectangle on picture). You can add or remove the standard fields included. You can also click on the + sign, add a new field, and rename it. You can make fields required by clicking on the edit icon (once they are active). That’s also where you can change the label and placeholder texts, as well as delete the field. Please note the email field cannot be removed.

Buttons

form20

Change the text of the button, the background color, the text color and add borders.

Now, make sure you save your design then proceed to close it, all that’s left afterwards is to apply it. A green arrow will point at the design being used.

form21

Enjoy!


Published December 14, 2016



Please help us improve our documentation:

Did you find this article helpful?

Not HelpfulNeeds WorkSo-soHelpfulVery Helpful (No Ratings Yet)
Loading ... Loading ...