Chat Theme Tab in Process Settings

the chat theme tab in process settings enables you to create customized themes for the web chat configuration is performed via various apis, which are provided by default within ameyo server 4 3 and above by using the parameters available in this tab, you can call any api to execute its specific function this tab and the "default chat theme" will remain disable until a customized theme is added parameters the parameters section outlines the hierarchy and values needed to execute theme operations via apis the hierarchy is structured as follows 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>) all color values accept the rgba format for precise control over appearance this detailed parameter structure allows thorough customization of the ameyo web chat theme to create engaging customer interactions get session id of administrator login session it is requierd to provide the session id of the current administrator's login while using the apis get the access to the server operating system where ameyo server is installed and execute the following commands to get the same psql u postgres \c ameyodb select from user session history where logout time is null; replace ameyodb with the ameyo database of your ameyo server installation the session id of the administrator changes with every new login so, you have to execute the above command every time whenever the administrator logins chat theme apis following operations can be performed through the apis each oepration is served by a dedicated api add theme add property to theme update theme apply theme remove property from a configuration of a theme get all themes get theme configuration 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 administrator'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 "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 administrator'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 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" 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 administrator'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 administrator'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 administrator'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 administrator'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