As a software development agency, we have tight process in place to make sure all of our themes work before they are shipped to you. This includes testing the themes in various operating systems, numerous browsers and devices. However, as human being, there's still possibility of a mistake with our work. But worry not, we'll do everything to correct them. Our themes come with lifetime warranty.

It's important to note that the warranty only covers the theme code that we wrote. Additional customization or additional codes are not supported by Supporto360 team. 

Before buying this theme, please read this information thoroughly.

• Our themes are digital goods that cannot be "returned". Once purchased, you will have access to the theme forever in your theme library. In addition, you will have lifetime access to the theme source code if you're getting the Developer license.
• We do not have to provide a refund if you have changed your mind about a particular purchase, so please choose your theme carefully. If the theme has a defect, we will meet our obligations to provide a fix or update.

There are some conditions where a refund will be made:

• The theme has a security vulnerability. If the theme contains a security vulnerability and can't easily be fixed you would be entitled to a refund.
• If the theme is not as described or doesn't work the way it should, then we will make the best effort to fix the issue. If the issue can't be fixed, then you would be entitled to a refund.

Asking Zendesk to Help

This theme is offered via Zendesk Marketplace. However, the theme is fully supported by Supporto360. If you have any questions or issues regarding this theme, Zendesk Support team won't be able to help. Please reach out via email help@supporto360.com

Support is part of our name :)

That said, if you have any questions, issues, concerns regarding our themes, please don't hesitate to reach out to us via our support email help@supporto360.com. Our business hours are Monday to Friday, 9am to 5pm EST. We do our best to get back to you within 1 business day.

Some useful information:

• Theme Features - see how to use or configure our theme features
• Theme Customization - see some ideas to further customize our themes

There are some applications and software that require API integrations to handle the critical parts of the businesses. Let us know how we can help connect these apps. Some common apps we connect are:

• Customer Relationship Management (CRM)
• Enterprise Resource Planning (ERP)
• Content Management System (CMS)
• Ecommerce Platforms
• Payment Methods. 

Web development and design is a complete thought process involving all the minor and major details according to the business which includes conceptualizing, UI/UX, Color scheming, Aesthetics, and visual outcome of the project.

Our Web Development services include:

• Sketching
• Planning & Strategy
• Wireframing
• Web Optimization
• Custom and Wordpress Development

We specialize in React development. We offer three main services:

• Custom React JS Development - we help you build awesome customer experience interfaces using React JS as part of your larger tech stack
• Web Application Development - we help you create or maintain web application whether it's a single page application or dynamic web application
• Migration to React - if your app is running on legacy/older Javascript platform, migrating to React for better performance, maintainability, and scalability. 

• Never-ending pile of support tickets
• Missed customer emails that fell through the cracks
• Low satisfaction scores
• Messy ticket views and macros
• Tickets not routed to the right group

If all of this sound familiar to you, let us help you. Our professional services team will help assess your Zendesk instance and identify actionable items to improve your Zendesk. We'll start the process by reviewing enabled support channels, ticket routing and automation, and how agents solve tickets efficiently. Reach out to info@supporto360.com for more details.

Accelerate your company's growth with us.

We're a Software Development Company offering services in:

• Web Development
• Javascript Apps
• Support Platforms 
• API Integrations

With decades of combined experience, we're looking forward to partnering with you to grow your business, especially enabling you to get the most values from Zendesk.

Through theme settings, configure your brand's color, logo, icons, etc. to align with your company's brand guideline. Here are some examples of designs possible with Elegante 360 theme.

Custom blocks are useful to highlight key information on the Help Center homepage or if you need to highlight certain categories, or need to include links to other websites outside the Help Center.

The X-Ray theme comes with 6 custom blocks. These blocks can be configured in the theme settings. You can change the icon, text, description and URL of each block.

How to add custom blocks?

This document contains detailed instructions to add more custom blocks (i.e. if you need more than 6 custom blocks):

1. Download the theme code
2. Edit home_page.hbs
3. Edit manifest.json
4. Import new theme file to Zendesk

Download the theme code

• In the Guide Admin section, navigate to the theme workbench.
  

• Click on the theme settings icon, and choose Download. This will download the theme zip file.
  

• Extract the .zip file into a folder.
  

Edit home_page.hbs file

• Once extracted open the folder theme file with your code or text editor app such as Notepad or Notepad++. In our example, we're using Visual Studio Code
  

• Locate homepage.hbs in templates folder and open it
  

• Find custom_block with Ctrl+F
  

• The custom block code is inside the {{#isnt setting.custom_block_<no. customblock>_title ''}} and end with {{/is}}, so you should copy all the code inside the if brackets, follow the image below
  

• {{#isntsettings.custom_block_1_title''}}
  
        <divclass="custom-blocks-item medium-blocks">
  
          <aclass="custom-block-link"href="{{#ifsettings.dc_toggle}}
  
                {{dc'custom_block_1_url'}}
  
                {{else}}
  
                {{settings.custom_block_1_link}}
  
                {{/if}}">
  
            <divclass="custom-block-icon">
  
              <imgsrc="{{settings.custom_block_1_icon}}"alt="{{settings.custom_block_1_title}}">
  
            </div>
  
            <h3class="custom-block-title">
  
              {{#ifsettings.dc_toggle}}
  
              {{dc'custom_block_1_title'}}
  
              {{else}}
  
              {{settings.custom_block_1_title}}
  
              {{/if}}
  
            </h3>
  
            <pclass="custom-block-description">
  
              {{#ifsettings.dc_toggle}}
  
              {{dc'custom_block_1_description'}}
  
              {{else}}
  
              {{settings.custom_block_1_desc}}
  
              {{/if}}
  
            </p>
  
          </a>
  
        </div>
  
        {{/isnt}}

• Paste the code below custom_block_6 don't forget to change the custom_block number, (ex: if you copy custom_block_1 rename to custom_block_7) , so basically it's number is in order, and make sure no duplicate number or your newest added custom block will be same with the one you copied.
  

Here is the list of code that you need to rename when copying follow the picture above:

• {{dc 'custom_block_<customblock no.>url'}}
• {{settings.custom_block_<customblock no.>url'}}
• {{settings.custom_block_<customblock no.>icon'}}
• {{dc 'custom_block_<customblock no.>title'}}
• {{settings.custom_block_<customblock no.>title'}}
• {{dc 'custom_block_<customblock no.>description'}}
• {{settings.custom_block_<customblock no.>description'}}

Now after adding new custom block from the homepage we need to add it's setting for the image and the title.

Edit manifest.json file

• Now that you've added the additional code for the new custom block. Let's update the manifest.json file. This way you can change the custom block settings through the theme settings (instead of editing the source code every time you need to update the additional custom block)
• Locate the manifest.json file and open it
  

• Find custom_block with Ctrl+F and then locate "label": "Custom Block 1" after you locate it you need to see the structure first in image below all the custom block setting is inside this bracket :

• {
  "label": "Custom Block 1",
  "variables": [ ... ]
  }

• where [ ... ] is al custom block setting content, if you see image below you'll know that the setting structure is the same with custom block 2,3,4.. and so on.
  

• After copying the setting from custom block 1 follow this below image to block the code and copy, copy from this symbol "{" and end with this symbol ",". if you open with visual code you can minimize the code like this image below to make it easier to see the structure.
  
  

• Now locate the last custom block setting in our case is custom block 6, following this image below, you need to paste the copied code after the "}," symbol. make sure you follow the image below.
  
  

• Rename the custom block number to match your custom block new number in our case it's 7, you just need to keep the custom_block_icon, custom_block_title, custom_block_desc, and custom_block_url settings and delete the other setting follow the image below.
  
  

• After that exit the code editor go to settings folder to place your new custom block image.
  

• Place your custom block image here, make sure the name follow the image below it's "custom_block_<custom block no.>icon" and if you can make the format all the same to prevent error.
  
  

• Go back to X-Ray folder select all the items there and then add it to archive.
  

• Set the format to .zip
  

Import the new theme file to Zendesk

• Drag the X-Ray.zip or yourtheme.zip to Zendesk Guide theme workbench.
  

• Drag and drop it here.
  

• Once loaded, you can configure the settings and make it your live theme.
  

• Your newly added custom block should appear now and you can customize it from the customize menu in the Zendesk theme settings.
  
  

Our themes can be easily customized. The codes are well documented/commented on, they were written using common software development approach and naming conventions. However, if you don't have the resources or time, we offer our professional services to take one step further than just branding your Zendesk Help Center. This customization service is what you need if:

• You would like to change the layout of your Zendesk Help Center.
• You would like to change the header and footer to make it exactly like your main website

Some additional information around our theme services:

• How much does it cost? It really depends on what you need, but this starts from $99. This fee is paid in full before we start the work.
• How long will this take? Again, this really depends on the complexity of your requirements. On average, 7 business days are enough time to change your header & footer, as well as customizing the home page, and a few other areas or features of the Help Center
• How are the changes deployed? We will be working in your sandbox environment (if you have one), or one of our development instances. Once you approve the change, we'll help you deploy the changes to the production environment.

TBD

This theme supports a multi-language setup. Most components of the Help Center are using Zendesk translation engine. This article will cover additional steps to make some Homepage components to support multilanguage. This includes custom header links, custom block descriptions and text, footer copyright text, etc.

Before you follow the steps below, please ensure you have followed the steps outlined in thisdocument.

Add Dynamic Content

For detailed steps to add Dynamic Content, please see this Zendesk support article.

Here is the list of Dynamic Content required for this theme:

• info_notification_title
• info_notification_body
• info_notification_title_2
• info_notification_body_2
• info_notification_title_3
• info_notification_body_3
• header_url_title_1
• header_url_title_2
• header_url_title_3
• header_url_link_1
• header_url_link_2
• header_url_link_3
• help_center_title
• hero_title
• search_placeholder
• popular_search_keyword
• custom_block_1_title
• custom_block_1_description
• custom_block_1_url
• custom_block_2_title
• custom_block_2_description
• custom_block_2_url
• custom_block_3_title
• custom_block_3_description
• custom_block_3_url
• custom_block_4_title
• custom_block_4_description
• custom_block_4_url
• custom_block_5_title
• custom_block_5_description
• custom_block_5_url
• custom_block_6_title
• custom_block_6_description
• custom_block_6_url
• site_contact_1_description
• site_contact_2_description
• site_contact_3_description
• site_contact_4_description
• com_custom_block_1_url
• com_custom_block_2_url
• com_custom_block_3_url
• com_custom_block_1_title
• com_custom_block_2_title
• com_custom_block_3_title
• com_custom_block_1_description
• com_custom_block_2_description
• com_custom_block_3_description
• footer_copyright
• footer_description
• footer_url_title_1
• footer_url_title_2
• footer_url_title_3
• footer_url_title_4
• footer_url_title_5
• footer_url_link_1
• footer_url_link_2
• footer_url_link_3
• footer_url_link_4
• footer_url_link_5
• facebook_url
• twitter_url
• youtube_url
• linkedin_url
• instagram_url

Turn on Multilanguage Settings

In the theme settings, enable the option "Enable dynamic content translations".

Tabs

Takes the basic nav and adds the .tabs-nav class to generate a tabbed interface. Use them to create tabbable regions.

Example Tab

<div class="tabs">
 <div class="tabs-nav">
  <a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
  <a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
  <a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
 </div>
 <div class="tabs-content">
  <div id="test1">...</div>
  <div id="test2">...</div>
  <div id="test3">...</div>
 </div>
</div>

Tab with active tabs color

<div class="tabs colored-1">
 <div class="tabs-nav">
  <a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
  <a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
  <a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
 </div>
 <div class="tabs-content">
  <div id="test1">...</div>
  <div id="test2">...</div>
  <div id="test3">...</div>
 </div>
</div>

Tab with active tabs color and background color

<div class="tabs colored-2">
 <div class="tabs-nav">
  <a class="tabs-link" data-target="#test1" data-toggle="tab">Test1</a>
  <a class="tabs-link" data-target="#test2" data-toggle="tab">Test2</a>
  <a class="tabs-link" data-target="#test3" data-toggle="tab">Test3</a>
 </div>
 <div class="tabs-content">
  <div id="test1">...</div>
  <div id="test2">...</div>
  <div id="test3">...</div>
 </div>
</div>

Callout

Provide contextual feedback messages for typical user actions with the handful of available and flexible messages.

<div class="callout">
 <p class="callout-title">This is default callout</p>
 <p>...</p>
</div>

<div class="callout callout-dashed">
 <p class="callout-title">This is dashed callout</p>
 <p>...</p>
</div>

<div class="callout callout-transparent">
 <p class="callout-title">This is transparent callout</p>
 <p>...</p>
</div>

<div class="callout callout-info">
 <p class="callout-title">This is info callout</p>
 <p>...</p>
</div>

<div class="callout callout-success">
 <p class="callout-title">This is success callout</p>
 <p>...</p>
</div>

<div class="callout callout-warning">
 <p class="callout-title">This is warning callout</p>
 <p>...</p>
</div>

<div class="callout callout-alert">
 <p class="callout-title">This is alert callout</p>
 <p>...</p>
</div>

Accordion

Build vertically collapsing accordions in combination. 

Example Accordion

<div class="accordion">This is accordion 1</div>
 <div class="accordion-panel">
  <p>...</p>
</div>

<div class="accordion">This is accordion 2</div>
 <div class="accordion-panel">
  <p>...</p>
</div>

<div class="accordion">This is accordion 3</div>
 <div class="accordion-panel">
  <p>...</p>
</div>

With Video Blocks, you have the option to pop-up the video on the homepage or direct users to an URL. If you'd like the video to pop-up on the homepage, you would need to choose the "Embed" option. Ensure to enter the embed URL instead of the regular URL.

For example, enter

https://www.youtube.com/embed/zMiClV-gVLs

instead of

https://www.youtube.com/watch?v=zMiClV-gVLs

TBD

TBD

TBD