Brand Your System with Custom Interface

Your community can have the same look and style of your website, so user will think he never left your website when entering help center. Integrate custom header, footer, change css and js along with background, buttons, colors.

Cloud Account Customization Guide

To use custom interface, go to Administration » Interface » My Interface and add required changes.

In order to start working on customization, you would need to inspect elements in your browser or use Firebug and overload classes with your own by adding the same name of the class in CSS block and save changes.

Make sure to clean browser cache in order to see the changes.

Self-Hosted Customization Guide

System support custom themes for both desktop and mobile UI. Custom theme should be placed as a folder in custom/themes on your server.

Main customization should be done in theme.css. We also recommend to not override templates other than header.phtml and footer.phtml in order to not get issues after upgrade to the next version of UseResponse.

Here is the following structure of the folders you can have:

assets
        - desktop
            - css
                -theme.css
                  - jssdk
                    -widgets.css
            - js
                - theme.js
            - images
        - mobile
            - css
            - js
templates
        - layout
            - header.phtml
            - footer.phtml

We have created sample theme attached to this article so you can get better idea how to customize css and override templates.

Once theme is created, it should be activated in Administration » Interface and community could be check by clicking monitor icon in top right, or using left button in agents interface Manage » Community, or going directly to your home screen of community portal.

Customization of Embeddable Widgets

With UseResponse you can easily customize the look of any embeddable widgets - live chat widget, widgets with contact and feedback form, knowledge base widgets in case they don't match the design of your site.

  • Cloud version - inspect the elements of the widget in your browser and override the default styles with your own CSS in Widgets CSS in Administration » Interface » My Interface.
  • Self-hosted version - in order to customize widgets you need to create /jssdk folder inside /css folder of your custom theme. All widgets customization should be performed in widgets.css that should be placed in /jssdk folder.

Once you add your own widget styling, don't forget to clear browser cache for the changes to be displayed.

Is article helpful?