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.
Last updated
After integrating the mobile SDK successfully, you can learn how to customize your offline in-app message box on this page.
Last updated
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.
The editing options you'll see in the first step when customizing the message box are included under General 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. |
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. |
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.
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.
The text to be included in the title is determined here.
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. |
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. |
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. |
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.
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.
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.
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.
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.
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. |
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.
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.
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.
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.
The title of the page is entered in this field.
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. |
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. |
This section contains page contents that inform customers that they can add a new ticket if they wish.
The page title is determined in this field.
The subtitle is entered in this field.
This field can be used for a comment text to direct customers who want to create a new ticket.
This field contains the button text added to direct customers to the create new ticket page .
The short note to be added to the bottom of the page is entered in this field.
In this section, the adjustments for the screen where the details of the conversation with the customer are seen are set.
You can enter the text you want to appear as the title on the conversation screen from this field.
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. |
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. |
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. |
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. |
It is the last page that customers who successfully sent the message will see. The page design is organized in the following subtitles:
The page title is defined in this field.
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.
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.
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.
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).
You can edit the note you want to be at the end of the page in this field.
