Chat Theme Tab in Process Settings

This tab allows the creation of the customized themes for the Web Chat. You have to configure it through the different APIs, which are provided by default within Ameyo Server 4.3. Using the parameters provided here, any API can be called to perform its designated operation.

Figure: Chat Themes Tab

This tab and the "Default Chat Theme" will remain disable until a Customized theme is added.

Parameters

Before going to the APIs to perform the theme operations, it is required to go through the parameters and their values, which will be required to call the API to perform any option. Here, parameters are given in the following hierarchy.

Theme Configuration → Component → Property → Value

• DEFAULT_REGISTRATION_FORM: It is the registration form to start the chat. It has the following components.
  • HEADER: It lets you modify the header in the form.
    • TEXT: It lets you modify the text in header. It accepts the value in text format.
    • COLOR: It lets you modify the color of header in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • TEXT_COLOR: It lets you modify the color of the text in the header in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • INPUT_FIELD: It lets you modify the formatting of the input field in the form.
    • TEXT_COLOR: It lets you modify the color of the text in the Input Field in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • BUTTON: It lets you modify the formatting of the button in the form.
    • COLOR: It lets you modify the color of button in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • TEXT_COLOR: It lets you modify the color of text in button in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • SHAPE: It lets you modify the shape of the button. It accepts the value as cornered or rounded.
  • SUCCESS_MESSAGE: It lets you modify the formatting of the success message.
    • COLOR: It lets you modify the color of the text in the success message. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • ERROR_MESSAGE: It lets you modify the formatting of the error message.
    • COLOR: It lets you modify the color of the text in the error message. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • BACKGROUND: It lets you modify the background color in the form.
    • COLOR: It lets you modify the color of the background in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
• DEFAULT_OFFLINE_REGISTRATION_FORM: It is the default offline registration form that appears when the chat is offline. It has the following components.
  • HEADER: It lets you modify the header in the form.
    • TEXT: It lets you modify the text in the header. It accepts the value in text format.
    • COLOR: It lets you modify the color of the header in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • TEXT_COLOR: It lets you modify the color of text in the header in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • INPUT_FIELD: It lets you modify the formatting of the input field in the form.
    • TEXT_COLOR: It lets you modify the color of the text in the Input Field in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • BUTTON: It lets you modify the formatting of the button in the form.
    • COLOR: It lets you modify the color of the button in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • TEXT_COLOR: It lets you modify the color of the text in the button in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • SHAPE: It lets you modify the shape of the button. It accepts the value as cornered or rounded.
  • SUCCESS_MESSAGE: It lets you modify the formatting of the success message.
    • COLOR: It lets you modify the color of the text in the success message. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • ERROR_MESSAGE: It lets you modify the error message.
    • COLOR: It lets you modify the color of the text in the error message. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • BACKGROUND: It lets you modify the background in the form.
    • COLOR: It lets you modify the color of the background in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • PLACEHOLDER: It lets you modify the text that is displayed over the input field as an introduction to the offline registration form.
    • TEXT: It lets you modify the placeholder text in the form. It accepts the value in plain text.
    • TEXT_COLOR: It lets you modify the color of the placeholder text in the form. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
• CHAT_SCREEN: It is the main chat screen. It has the following components.
  • BACKGROUND: It lets you modify the background of the chat screen.
    • COLOR: It lets you modify the color of the background in the chat screen. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • SYSTEM_MESSAGE: It lets you modify the formatting of the system message.
    • COLOR: It lets you modify the color of the text in the system message. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • CUSTOMER_MESSAGE: It lets you modify the formatting of the customer message.
    • BACKGROUND_COLOR: It lets you modify the background color of the text in the customer message.
    • COLOR: It lets you modify the color of the text in the customer message. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • AGENT_MESSAGE: It lets you modify the formatting of the agent message.
    • BACKGROUND_COLOR: It lets you modify the background color of the text in the agent message. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • COLOR: It lets you modify the color of the text in the agent message. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • TIMESTAMP: It lets you modify the formatting of the timestamp (given below the messages) in the chat screen.
    • COLOR: It lets you modify the color of the timestamp. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • FOOTER: It lets you modify the formatting of the footer.
    • COLOR: It lets you modify the color of the footer. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • HEADER: It lets you modify the header in the chat screen.
    • COLOR: It lets you modify the color of the header in the chat screen. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • TEXT_COLOR: It lets you modify the color of the text in the header in the chat screen.
    • TEXT: It lets you modify the text in the header in the chat screen. It accepts the value as text.
  • TEXT_AREA: It lets you modify the formatting of the text area in the chat screen.
    • COLOR: It lets you modify the color of the text area.
    • TEXT_COLOR: It lets you modify the color of the text in the text area.
  • ATTACHMENT_ICON: It lets you modify the formatting of the attachment icon that is used to upload the files.
    • COLOR: It lets you modify the color of the attachment icon. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • SEND_ICON: It lets you modify the formatting of the send icon that is used to send the messages.
    • COLOR: It lets you modify the color of the send icon. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
• WELCOME_SCREEN: It is the welcome screen of chat that is displayed on the starting. It has the following components.
  • OFFLINE_BADGE: It lets you modify the formatting of the offline badge.
    • TEXT: It lets you modify the text in the badge. It accepts the value in text.
    • COLOR: It lets you modify the color of the badge. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • TEXT_COLOR: It lets you modify the color of the text in the badge. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
  • ONLINE_BADGE: It lets you modify the formatting of the online badge.
    • TEXT: It lets you modify the text in the badge. It accepts the value in text.
    • COLOR: It lets you modify the color of the badge. It accepts the value in RGBA(<number>,<number>,<number>,<number>).
    • TEXT_COLOR: It lets you modify the color of the text in the badge. It accepts the value in RGBA(<number>,<number>,<number>,<number>).

Get Session ID of Voice-Admin Login Session

It is requierd to provide the session ID of the current Voice-Admin's login while using the APIs. Get the access to the server operating system where Ameyo Server is installed and ask your administrator to get the session id from the backend.

Chat Theme APIs

Following operations can be performed through the APIs. Each operation is served by a dedicated API.

1. Add Theme
2. Add Property to Theme
3. Update Theme
4. Apply Theme
5. Remove Property from a Configuration of a Theme
6. Get All Themes
7. Get Theme Configuration
8. Remove a Theme

Add Theme API

Following is the URL of the API to be called for adding a theme for Web Chat.

You have to replace the values in the following URL, copy it, and browse it in the same Web browser where you are logged on to Ameyo Application.

<protocol>://<IP_OR_DOMAIN_OF_APPSERVER>:<PORT_NUMBER>/dacx/jsonCommand?command=remote.processor.webchatThemeConfigurationService.addWebchatThemeConfiguration&data={sessionId:<SESSION_ID>,themeName:<NAME_OF_THEME>,isEnabled:<boolean>,webchatThemeConfigurationProperties:[{chatScreen:CHAT_SCREEN,component:<COMPONENT_NAME>,property:<PROPERTY_NAME>,value:<VALUE>}]}

Replace the following variables.

Variable	Required Value
<protocol>	HTTP or HTTPS
<IP_OR_DOMAIN_OF_APPSERVER>	IP Address or Domain Name of the Site where Ameyo Application is running.
<PORT_NUMBER>	8888 for HTTP or 8443 for HTTPS
<SESSION_ID>	Session ID of the Voice-Admin's current login session, which you have obtained through the command given above.
<NAME_OF_THEME>	Here, you have to provide a name for this new theme. It should be provided in text format.
<boolean>	true OR false
<COMPONENT_NAME>	Provide a name for the component, of which formatting you want to modify.
<PROPERTY_NAME>	Provide a name for the property of the already provided component, of which formatting you want to modify.
<VALUE>	Provide a value for the already provided property. Common property value formats are given below. COLOR or TEXT_COLOR: 'RGBA(<number>,<number>,<number>,<number>)' TEXT: Text format SHAPE: cornered or rounded.

When you execute the above command, the browser gives you a theme ID. Note it down.

Figure: Add Theme API

"Chat Themes" tab in "Process Settings" now shows the newly added theme.

Default Theme will also be activated with the addition of this customized theme.

Add Property to Theme API

Following is the URL of the API to be called for adding or modifying a property to any screen in your selected Web Chat Theme.

You have to replace the values in the following URL, copy it, and browse it in the same Web browser where you are logged on to Ameyo Application.

<protocol>://<IP_OR_DOMAIN_OF_APPSERVER>:<PORT_NUMBER>/dacx/jsonCommand?command=remote.processor.webchatThemeConfigurationService.addOrUpdateWebchatThemeConfigurationProperty&data={sessionId:<SESSION_ID>,themeId:<THEME_ID>,screen:<SCREEN_NAME>,component:<COMPONENT_NAME>,property:<PROPERTY_NAME>,value:<VALUE>}

Replace the following variables.

Variable	Required Value
<protocol>	HTTP or HTTPS
<IP_OR_DOMAIN_OF_APPSERVER>	IP Address or Domain Name of the Site where Ameyo Application is running.
<PORT_NUMBER>	8888 for HTTP or 8443 for HTTPS
<SESSION_ID>	Session ID of the Voice-Admin's current login session, which you have obtained through the command given above.
<THEME_ID>	Provide the ID of the theme that you want to modify.
<SCREEN_NAME>	Provide the name of the theme configuration that you want to modify.
<COMPONENT_NAME>	Provide a name for the component, of which formatting you want to modify.
<PROPERTY_NAME>	Provide a name for the property of the already provided component, of which formatting you want to modify.
<VALUE>	Provide a value for the already provided property. Common property value formats are given below. COLOR or TEXT_COLOR: 'RGBA(<number>,<number>,<number>,<number>)' TEXT: Text format SHAPE: cornered or rounded.

Figure: Add Property to Theme API

After executing the API, browse "Chat Theme" tab and check the theme in which you have modified the property. Press "Refresh" to update the changes, if required. Here, in this test case, the color of header of Default Online Registration Form has been changed to "Green".

Figure: Modified Header of Registration Form

Rename Theme API

Following is the URL of the API to be called for renaming a selected theme.

You have to replace the values in the following URL, copy it, and browse it in the same Web browser where you are logged on to Ameyo Application.

<protocol>://<IP_OR_DOMAIN_OF_APPSERVER>:<PORT_NUMBER>/dacx/jsonCommand?command=remote.processor.webchatThemeConfigurationService.updateWebchatThemeConfiguration&data={sessionId:<SESSION_ID>,themeId:<THEME_ID>,themeName:<NAME_OF_THEME>,enabled:<BOOLEAN>}

Replace the following variables.

Variable	Required Value
<protocol>	HTTP or HTTPS
<IP_OR_DOMAIN_OF_APPSERVER>	IP Address or Domain Name of the Site where Ameyo Application is running.
<PORT_NUMBER>	8888 for HTTP or 8443 for HTTPS
<SESSION_ID>	Session ID of the Voice-Admin's current login session, which you have obtained through the command given above.
<THEME_ID>	Provide the ID of the theme that you want to modify.
<NAME_OF_THEME>	Provide the Name of the theme that you want to modify such as 'THEME_NAME'. (Add single quote).
<BOOLEAN>	true or false

Apply Theme API

Following is the URL of the API to be called for applying a selected theme on the Web Chat.

You have to replace the values in the following URL, copy it, and browse it in the same Web browser where you are logged on to Ameyo Application.

<protocol>://<IP_OR_DOMAIN_OF_APPSERVER>:<PORT_NUMBER>/ameyochatjs/test.html?campaignId=<CAMPAIGN_ID>&nodeflowId=<NODEFLOW_ID>&themeId=<THEME_ID>

Replace the following variables.

Variable	Required Value
<protocol>	HTTP or HTTPS
<IP_OR_DOMAIN_OF_APPSERVER>	IP Address or Domain Name of the Site where Ameyo Application is running.
<PORT_NUMBER>	8888 for HTTP or 8443 for HTTPS
<CAMPAIGN_ID>	You have to provide the ID of the campaign, which you can get from the campaign settings.
<NODEFLOW_ID>	Provide the ID of the nodeflow where the selected Chat Theme will be applied. Execute the following commands at the server operating system where Ameyo Server is installed. psql -U postgres: to enter the PostgreSQL console. \c ameyodb: to enter the database. select * from acd_node_to_aq_mapping;: to get the information on nodeflow along with its ID.
<THEME_ID>	Provide the ID of the theme that you want to apply on the selected nodeflow in the selected campaign.

Get Theme Configuration API

Following is the URL of the API to be called for getting Theme Configuration.

You have to replace the values in the following URL, copy it, and browse it in the same Web browser where you are logged on to Ameyo Application.

<protocol>://<IP_OR_DOMAIN_OF_APPSERVER>:<PORT_NUMBER>/dacx/jsonCommand?command=remote.processor.webchatThemeConfigurationService.getWebchatThemeConfigurationPropertiesForThemeId&data={<SESSION_ID>,themeId:<THEME_ID>}

Replace the following variables.

Variable	Required Value
<protocol>	HTTP or HTTPS
<IP_OR_DOMAIN_OF_APPSERVER>	IP Address or Domain Name of the Site where Ameyo Application is running.
<PORT_NUMBER>	8888 for HTTP or 8443 for HTTPS
<SESSION_ID>	Session ID of the Voice-Admin's current login session, which you have obtained through the command given above.
<THEME_ID>	Provide the ID of the theme that you want to modify.

Remove Theme Configuration API

Following is the URL of the API to be called for removing a theme configuration.

You have to replace the values in the following URL, copy it, and browse it in the same Web browser where you are logged on to Ameyo Application.

<protocol>://<IP_OR_DOMAIN_OF_APPSERVER>:<PORT_NUMBER>/dacx/jsonCommand?command=remote.processor.webchatThemeConfigurationService.removeWebchatThemeConfigurationProperty&data={sessionId:<SESSION_ID>,themePropertyId:<THEME_PROPERTY_ID>}

Replace the following variables.

Variable	Required Value
<protocol>	HTTP or HTTPS
<IP_OR_DOMAIN_OF_APPSERVER>	IP Address or Domain Name of the Site where Ameyo Application is running.
<PORT_NUMBER>	8888 for HTTP or 8443 for HTTPS
<SESSION_ID>	Session ID of the Voice-Admin's current login session, which you have obtained through the command given above.
<THEME_PROPERTY_ID>	Provide the ID of the theme configuration (also called Property ID) that you want to delete. Execute the following commands at the server operating system where Ameyo Server is installed. psql -U postgres: to enter the PostgreSQL console. \c ameyodb: to enter the database. select * from webchat_theme_configuration_properties;: to get the ID of theme configuration.

Remove Theme API

Following is the URL of the API to be called for removing a theme.

You have to replace the values in the following URL, copy it, and browse it in the same Web browser where you are logged on to Ameyo Application.

<protocol>://<IP_OR_DOMAIN_OF_APPSERVER>:<PORT_NUMBER>/dacx/jsonCommand?command=remote.processor.webchatThemeConfigurationService.removeWebchatThemeConfiguration&data={sessionId:<SESSION_ID>,themeId:<THEME_ID>}

Replace the following variables.

Variable	Required Value
<protocol>	HTTP or HTTPS
<IP_OR_DOMAIN_OF_APPSERVER>	IP Address or Domain Name of the Site where Ameyo Application is running.
<PORT_NUMBER>	8888 for HTTP or 8443 for HTTPS
<SESSION_ID>	Session ID of the Voice-Admin's current login session, which you have obtained through the command given above.
<THEME_ID>	Provide the ID of the theme that you want to delete.