+1-415-501-9156 (USA) • +44-151-808-0440 (Europe) • +972-522-341-957 (Israel) Contact/Chat

Adding the Flare CSS and JS Files to Zendesk

The Flare2Zendesk app imports your Flare content. You need to manually bring in the relevant other files from the Flare delivery into Zendesk for the styles and Javascript code features to work.

The instructions here are general. The exact files depend on which skin you are using in Flare and the features you have selected. These are general guidelines based on an example, but you may need to play yourselves to get it right. Alternatively, our team of experts are willing to do that for you (as a paid service). Sometimes this is preferable. 

The example we are using in this article is included as an attachment. You are welcome to try using this delivery for testing in your environment, 

A typical Flare output may look something like the figure below. Note that your delivery output may be a little different.

 

From the Zendesk Help Center menu, select General > Customize design.

  1. The Theme sidebar appears.
  2. Click Edit theme
  3. The Theme editor appears. 
  4. Click on the Assets tab and copy in the required files.

    In the above example, we need to import the CSS and JS files from the directories in the table below. We have found these files affect the content output. Remember, we are not concerned with any styles are code in the tripane skin surrounding the code. Please ensure your files DO NOT contain spaces. We recommend you look in the actual Flare HTML files and see which CSS files are referenced. 

    Group Path Files

    CSS

    ..\Content\Resources\Stylesheets

    MainStyles.css
     

    ..\Content\Resources\TableStyles

    Note: Not all Flare outputs have a separate styling directory and CSS for tables. 

    BasicDemo.css
    PatternedRows.css
    PatternedRowsOnDarkBackground.css
    Simple.css
    SimpleWithPadding.css
    Standard.css
    StandardOnDarkBackground.css

     

    ..\Skins\Default\Stylesheets

    Slideshow.css
    TextEffects.css
    Topic.css

    Javascript

    ..\Resources\Scripts

    jquery-migrate.min.js
    MadCapAll.js
    plugins.min.js

     
  5. Select Document head from the dropdown list.
  6. Adding the CSS links. Add the following syntax for each line. Note that there is a difference between calls to a regular stylesheet and table stylesheets. You need to look at the code in the source Flare HTML pages to see which is which in your delivery. Essentially, you want the same calls to some of those same stylesheets but from Zendesk instead. 

    <link href="{{asset 'CSSNAME.css'}}" rel="stylesheet" type="text/css" />

    The example above shows how to use the "Asset" code in Zendesk to call the files from the Assets. The code after the Asset depends on the type of CSS for each file. If it helps, below shows the actual code used in the example in this article:

    <link href="{{asset 'MainStyles.css'}}" rel="stylesheet" type="text/css" data-mc-generated="True" />
    <link href="{{asset 'Simple.css'}}" rel="stylesheet" data-mc-stylesheet-type="table" />
    <link href="{{asset 'Standard.css'}}" rel="stylesheet" data-mc-stylesheet-type="table" />
    <link href="{{asset 'PatternedRows.css'}}" rel="stylesheet" data-mc-stylesheet-type="table" />
    <link href="{{asset 'BasicDemo.css'}}" rel="stylesheet" type="text/css" />
    <link href="{{asset 'PatternedRowsOnDarkBackground.css'}}" rel="stylesheet" type="text/css" />
    <link href="{{asset 'SimpleWithPadding.css'}}" rel="stylesheet" type="text/css" />
    <link href="{{asset 'StandardOnDarkBackground.css'}}" rel="stylesheet" type="text/css" />
    <link href="{{asset 'Slideshow.css'}}" type="text/css" data-mc-generated="True" />
    <link href="{{asset 'TextEffects.css'}}" rel="stylesheet" type="text/css" data-mc-generated="True" />
    <link href="{{asset 'Topic.css'}}" rel="stylesheet" type="text/css" data-mc-generated="True" />
  7. Adding the JS links. Add the following syntax for each line: 

    <script src ="{{asset 'FILE.js}}" ></script>

    In the same way as the CSS links, use the filenames you placed in Assets. Below shows the actual code used in the example in this article:

    <script src="{{asset 'jquery-migrate.min.js'}}"></script>
    <script src="{{asset 'MadCapAll.js'}}"></script>
    <script src="{{asset 'plugins.min.js'}}"></script>
  8. Click Save and Publish to activate the code. 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.