Customizable In-App Message Box

After integrating the mobile SDK successfully, you can learn how to customize your offline in-app message box on this page.

In this section, you can shape the design and contents of the message box that your app users who want to send a ticket message will see. Let's examine the procedures you can do in this area in detail, which is prepared in 7 stages.

General Settings

The editing options you'll see in the first step when customizing the message box are included under General Settings.

1. Settings

In this section, you can choose the appropriate background color of your message box and what language the message box will appear in by default.

Title	Description
Default Language	The language you specify is selected by default.
Main Background Color	The background color of the page.

2. Title

In this field, you can specify the background color, font, size, button color and shading for the Contact Us text at the top of the page.

Title	Description
Title Background Color	The background color of the title.
Title Text Color	Text color of the title text.
Title Text Font Size	The font size of the title text.
Title Text Font Thickness	The font thickness of the title text.
Title Icon Color	The color of the return icon in the title section.
Title Shading	The shading state of the box containing the title.

3. Footnote Format

In this section, you can set the customizations of the information note at the end of the page. You can enter the coloring and size for the text to be included here.

Title	Description
Footnote Color	The font color of the informational note.
Footnote Font Size	The informational note font size.
Footnote Font Thickness	The thickness of the informational note.

If you want to reset the settings you have made for the whole page and return to the default settings, click Return to default settings located in the bottom left corner of the page.

First Screen

In this section, the details of the first page that customers will encounter are determined when users click Contact Us. If you want, for the text to be entered as a title, you can use pre-made texts such as Help Center, Contact Us, with professional translations in 40 languages. You can view the supported languages in which predefined texts that are in this area. You can also visit Professional Support in 40 Languages to get detailed information about the supported languages. If you want to update the texts with their ready translations, click Edit Translations.

Since the title coloring and fonts were arranged in the previous step, you can only make text content selections in this area.

You can also use ready-made texts for the fields you want to enter subtitles and descriptions to, or you can design the page the way you want by entering your own texts.

You should position a button on this screen to direct customers who decide to send a message to the page where they can share their personal information and messages. You can edit the button text, button type and border color in accordance with the UI design of your application. You can adjust the visibility of the information text at the end of the page in the Footnote Text field.

1. Title Text

The text to be included in the title is determined here.

2. Subtitle Text

Subtitle content and coloring selections are made here.

Title	Description
Subtitle Color	The color of the subtitle.
Subtitle Font Size	The font size of the subtitle.
Subtitle Font Thickness	The font thickness of the subtitle.

3. Description Text

Content and coloring selection of the description text that is going to be included on the page are made here.

Title	Description
Description Text Color	The color of the description text.
Description Text Font Size	The font size of the description text.
Description Text Font Thickness	The font thickness of the description text.

4. Button

Text content and visual customizations on the button are made here.

Description	Title
Button Text	The text to be included in the button.
Button Format	The style of the button.
Button Background Color	The background color of the button.
Button Edge Color	The edge color of the button.
Button Text Color	The text color of the text on the button.
Button Text Font Size	The font size of the related text on the button.
Button Text Font Thickness	The text thickness of the text on the button.
Button Icon	The icon that appears on the button.
Button Shading	The shading in the background of the button.

5. Footnote Text

The visibility of the information note that you want to appear at the bottom of the page can be activated by clicking on the button here.

Create Screen

Details of ticket messages and the form page where customers can enter their personal information are arranged on this screen. All the topics you will encounter are explained in detail below.

1. Title Text

The title content at the top of the form page is entered in this field. You can select ready-made texts whose translations are automatically filled in by Desk360, or you can optionally make translation entries of different texts.

For more information about ready-made texts, visit Professional Support In 40 Languages.

2. Subject Type

In this field, definitions are made so that the messages to be sent can be organized according to their topics.

For Example:

If the customer wants to submit a request for subscriptions, they can select Subscription or select Report to convey an error. You can specify these titles on the panel and bring the ones you want in the form to active status.

3. Custom Form Field

In this field, you can add and remove data entry boxes that you want to appear/disappear in the form. You can customize the type of form you want to show to your customers by specifying the options under this heading and add different types of fields such as selection list box and text entry.

4. Form Field Format

In this area, you can flexibly design the general view of the information boxes in the form. Which elements are allowed for changes are as follows:

Title	Description
Form Field Format	Ready-added form type.
Form Item Text Color	What information is required to be entered in the message boxes, the colors of these headers (email, subject etc.).
Form Element Border Color	Message box border coloring of item text contents.
Form Item Text Color (Focus)	The coloring of the information entered in the first message box.
Form Element Border Color (Focus)	Border coloring for the first message box.
Form Element Font Size	The font size of the contents in the message boxes.
Form Element Font Thickness	The font thickness.
Form Element Label Color	The coloring of the attachment name of the attached file (The file attachment name might look like this as an example: image1.png).
Form Element Label Font Size	The font size of the file attachment name.
Form Element Label Font Thickness	The thickness for the file attachment name.
Form Element Error Color	Color selection to indicate the defective area in case of an error.
Add File	The visibility of the Add File option on the form.

5. Button

In this section, you can specify the text and font attributes you want to appear on the button. Under the Welcome Screen, you can review in which areas button elements are allowed for editing.

6. Footnote Text

The information note at the end of the page is adjusted on this field. Optionally, the visibility of information notes can be turned off with a slider button.

7. Footnote Approval Text

The information note and the visibility of the check box are adjusted for the acknowledgement and approval of the agreement on the use of personal data.

Select Channel Screen

The design arrangements of the page are made here where all support request messages sent by the customers can be viewed. A new ticket can be created by clicking the + icon on the right side of the page.

1. Title Text

The title of the page is entered in this field.

2. Tab

Saved messages are displayed under two groups as Current and Past messages. The coloring and size determination of these titles can be done under the Tab title.

Title	Description
Tab Text Color (Active)	The text color of the tab that is actively displayed in front of the user.
Tab Text Color	The text color of the side tab.
Tab Border Color (Active)	The border coloring of the tab that is currently displayed.
Tab Font Size	The font size of the tab names.
Tab Font Thickness	The thickness of the tab names.

3. Listing & Items

The design features of the message list are determined in this section.

Title	Component
Listing Format	The style of list display.
Listing Background Color	The coloring of the list background.
Subject Color	Name coloring of the message subject.
Subject Font Size	Font size of the related subject.
Date Color	The colors of the send date of the message.
Date Font Size	The font size of the date.
Item Background Color	The background color of the boxes containing the messages.
Item Icon Color	The coloring for the envelope icon seen on the right of the message boxes.
Item Shading	The shading of message boxes.

Contact Us Screen

This section contains page contents that inform customers that they can add a new ticket if they wish.

1. Title Text

The page title is determined in this field.

2. Subtitle Text

The subtitle is entered in this field.

3. Description Text

This field can be used for a comment text to direct customers who want to create a new ticket.

4. Button

This field contains the button text added to direct customers to the create new ticket page .

5. Footnote Text

The short note to be added to the bottom of the page is entered in this field.

Ticket Detail Screen

In this section, the adjustments for the screen where the details of the conversation with the customer are seen are set.

1. Title Text

You can enter the text you want to appear as the title on the conversation screen from this field.

2. Chat Type

The design settings for the interview page are done in this field.

Title	Description
Chat Background Color	The background color of the conversation screen.
Chat Bubble Format	The design of the message balloons.

3. Message Sender

Color and font adjustments of messages received from customers are made in this field.

Title	Description
Sender Background Color	The background color of the message box received from the customer.
Sender Text Color	The text color for the incoming message.
Sender Font Size	The font size of the message.
Sender Font Thickness	The thickness of the message text.
Sender Date Text Color	The color of the text containing the date the message was received.
Sender Shading	The shading setting of the message box.

4. Message Receiver

Adjustments regarding the response to the customer are made in this field.

Title	Description
Receiver Background Color	The background color of the message box sent to the customer.
Receiver Text Color	The text color for the incoming message
Receiver Font Size	The font size of the message.
Receiver Font Thickness	The thickness level of the message.
Receiver Date Text Color	The text color for the date the message was received
Receiver Shading	Shading status of the message box.

5. Form Field Format

Visual arrangements of the form are done in this sections.

Title	Description
Form Background Color	The background color of the box reserved for transmitting a new message at the end of the page.
Form Border Color	The bottom border color of the message field.
Form Border Color (Focus)	The bottom border color that appears when the message area is actively used.
Form Placeholder Color	The color of the "Write a message" warning text to be displayed to the customer before entering a new message.
Form Text Color	The coloring of the entered new message.
Form Font Size	The font size of the new message.
Form Font Thickness	The thickness level of the entered message.
Form Button Icon Color	The color of the Send button that will be used to send the entered message.
Form Button Icon Color (Disabled)	Before entering any text, the button will be unavailable. In this state, the desired color to be displayed can be entered from this field.

Success Screen

It is the last page that customers who successfully sent the message will see. The page design is organized in the following subtitles:

1. Title Text

The page title is defined in this field.

2. Subtitle Text

The subtitle that will be located under the icon can be entered in this field. The coloring and font details can be edited from the subtitles.

3. Description Text

This field can be used if you want to enter a description text stating that the message transmitted by the customer has been delivered and that the reply will be made within a certain time period. The coloring and font details can be edited from subtitles.

4. Icon

The size and coloring of the icon to be displayed on the screen regarding the sending status of the message is done in this section.

5. Button

Button text and visual arrangements about the button are made in this field (You can review the details of the fields in the subtitles under Contact Us > Button).

6. Footnote Text

You can edit the note you want to be at the end of the page in this field.