Help Center

The default design theme is available from [Service Management → Help Center → PC/Mobile Template Management], and themes could be modified or created to suit your service.

Click the Add Template button to display a window where you can add the template. Select a template type to choose the type of script you want to write. (CSS, HTML, JS)

 

Let's take an example of changing the ① background image through HTML modification on the main screen of the Help Center, and changing the ② text color of the top main banner through CSS modification.

 

1) CSS

 

In the Online Contact Service Guide [Service Management → Help Center → Template Management], CSS table provides a summary of key elements that can be used to modify CSS. You can use the web engine's developer tools to examine the html elements on the Help Center page to find the names of the elements you want, or you can refer to the table in the Service Guide.

For the top main banner text, you can see that the element is named .carousel-caption.txt (main title), .carousel-caption.sub_txt (subtitle) of main.css.

 

Select CSS in the script to see a list of imported css files. You can view the contents of the CSS file by combining it with the address of the Online Contact which is currently in use with the path of the css file containing the element you want to modify.

   - Address Format: https://Domain Name.oc.toast.com/CSS File Path

 

Copy the contents of the CSS file and paste them into the editor, and modify the part you want to modify. In this example, color of .carousel-caption .title_txt, .carousel-caption .sub_txt is modified.

 

Save the modified CSS file, then click the Upload File button on the [Service Management → Help Center → Manage File Uploads] tab to upload the CSS file. Copy the file path of the corresponding CSS file that appears when the upload is complete.

Return to Add Template again and paste the copied file path into the imported CSS list that appears when you select the script type to CSS.

- Format: @import "File path";

 

The change of color could be checked through 'Preview' button.


2) HTML

 

Let's change the background image through modifying the HTML script.

If you select the script type as HTML on the Add Template screen and select the Help Center menu that you want to change, the changable HTML code will be displayed.

On [Service Management → Help Center → Manage File Uploads] tab, click Upload File button to upload the image to display on the Help Center main screen. Copy the file path of the corresponding image when the upload is complete.

 

Return to Add/Edit Template page again. Since we are trying to change the main banner image on the Help Center Home screen, select HTML → Main → Home, then paste the copied file path into the image path under the main_banner division.

 

Press the preview button to see the change of the background image. Click Save button after changing the elements to register the template. After registering, you can Enable/Edit/Delete templates.