{"id":825771,"date":"2018-01-02T16:00:08","date_gmt":"2018-01-02T16:00:08","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-add-ticket-support-to-divis-free-saas-layout-pack\/"},"modified":"2022-12-10T13:49:30","modified_gmt":"2022-12-10T13:49:30","slug":"how-to-add-ticket-support-to-divis-free-saas-layout-pack-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/how-to-add-ticket-support-to-divis-free-saas-layout-pack\/","title":{"rendered":"How to Add Ticket Support to Divi’s Free SaaS Layout Pack"},"content":{"rendered":"\n
\n

Every week, we provide you with a new and free Divi layout pack which you can use for your next project. Along with every layout pack, we also provide you with a use case that\u2019ll help you take your website to the next level. This week, as part of our ongoing Divi design initiative, we\u2019re showing you how to ticket support to Divi\u2019s free SaaS layout pack. With ticket support, you can easily follow up on all the questions your customers have about the software services you offer.<\/p>\n

Use Case Sneak Peek<\/h2>\n

Before we dive into the tutorial, let\u2019s take a quick look at the result we\u2019ll be showing you how to recreate, step by step. The first thing that\u2019ll be added to the website is a support button in the bottom left corner of your screen. This button follows your visitors throughout the entire site so they can get support at any time.<\/p>\n

\"ticket<\/p>\n

Another thing that\u2019ll be added is the support page which allows people to search for existing tickets or create a new ticket that matches a certain category. The support page looks like this for admins of the website:<\/p>\n

\"ticket<\/p>\n

And like this for visitors:<\/p>\n

\"ticket<\/p>\n

The Setup<\/h2>\n

1. Install and activate the Divi Theme
2. Install Plugins
3.\u00a0Download the Layout Pack\u00a0and Import the SaaS_All.json file to your Divi Theme Library.
4. Create new pages for each layout.
5. Create your primary menu.<\/p>\n

If you are confused by the setup listed above, you can find more detailed instructions on how to setup your layout properly by checking out these\u00a010 steps for using a layout pack for your new project.<\/p>\n

Part 1: Download & Install the uCare\u00a0Plugin<\/h2>\n

Step 1: Download Plugin<\/h3>\n

The first thing you will need to do is download the free uCare plugin which you can find on the following page. Click on the download button and the zipped plugin folder will automatically be added to your downloads folder.<\/p>\n

\"ticket<\/p>\n

Step 2: Install Plugin<\/h3>\n

Once you\u2019ve downloaded the uCare plugin, go to your WordPress website > Plugins > Add New and upload the plugin<\/strong>. Once you\u2019ve uploaded the plugin, make sure that you activate the plugin as well.<\/p>\n

\"ticket<\/p>\n

Part 2: Add Support Page to Menu<\/h2>\n

Step 1: Go to Your Existing Menu<\/h3>\n

Once you\u2019ve added and activated the free uCare plugin, a support page containing the plugin\u2019s content will automatically be created. Although this page is already accessible through the support button in the bottom left corner of each page, adding the support page to the primary menu as well is highly recommended. To add the support page to your primary menu, go to Appearance > Menus<\/strong>.<\/p>\n

Step 2: Add the Automatically Made Support Page to Your Menu<\/h3>\n

Then, select the support page and add it to your menu. Don\u2019t forget to save your menu\u00a0as well.<\/p>\n

\"ticket<\/p>\n

Part 3: Change Support Page Logo<\/h2>\n

Step 1: Go to Plugin Settings<\/h3>\n

Now, you can start modifying the plugin to your needs. Start by adding your logo to the settings of the uCare plugin by going to uCare Support > Settings<\/strong>. Preferably, the logo you\u2019re using is going to be the same logo you use on your website.<\/p>\n

\"ticket<\/p>\n

Step 2: Change Logo<\/h3>\n

Then, simply add your logo image file as the Logo Image and Favicon.<\/p>\n

\"ticket<\/p>\n

Part 4: Change Appearance<\/h2>\n

Step 1: Change Font if Needed<\/h3>\n

Most settings of the plugin are not possible to edit without additional CSS code. However, you can change a few things. One of those things is the font. If you prefer using another font family and font style, you can modify the Primary Font and Secondary Font within the content boxes that are marked in the print screen below.<\/p>\n

\"ticket<\/p>\n

Step 2: Change Color Palette to Match the SaaS Layout Pack<\/h3>\n

Another thing you can do is change the color palette of your plugin to match the style of your website. You can choose the colors yourself by using a color picker on your website or use the following colors below that match the layout pack:<\/p>\n

    \n
  • Primary color:\u00a0#487be5<\/li>\n
  • Hover color:\u00a0#254b7c<\/li>\n
  • Secondary color:\u00a0#aec1e5<\/li>\n
  • Tertiary color:\u00a0#f8534b<\/li>\n<\/ul>\n

    \"ticket<\/p>\n

    Step 3: Upload Login Background Image<\/h3>\n

    Make sure you change the Login Background Image as well. This is the background image that\u2019ll appear once visitors login or register on the support page. The image I\u2019ve chosen in the example below is part of the SaaS layout pack. After adding the SaaS layout pack to your Divi website, this image will automatically be added to your Media Library.<\/p>\n

    \"ticket<\/p>\n

    Part 5: Change or Keep Email Templates<\/h2>\n

    Step 1: Change Email Templates if Needed<\/h3>\n

    To access the support page, each one of your visitors will need an account. There are some default email templates available that send out all the information your visitors need. However, you can change all of these email templates or add new ones if you prefer by going to Email Templates > All Templates<\/strong>.<\/p>\n

    \"ticket<\/p>\n

    Step 2: Change User Notification Templates if Needed<\/h3>\n

    If you were to create new email templates, you could change the User Notification Templates within your plugin by going to uCare Support > Settings > Email<\/strong>.<\/p>\n

    \"ticket<\/p>\n

    Part 5: Add Ticket Categories<\/h2>\n

    Step 1: Choose Main Features as Categories<\/h3>\n

    The next part of setting up ticket support for your SaaS layout pack is choosing the ticket categories. There is a general category present, but you\u2019ll want to add other categories that match your software services as well. This allows you to be more organized and your visitors to be more precise with the questions they have.<\/p>\n

    Step 2: Add Them to Your Categories<\/h3>\n

    Once you\u2019ve chosen the categories, you can add them by going to uCare Support > Ticket Categories > Adding each one of the ticket categories individually<\/strong>.<\/p>\n

    \"ticket<\/p>\n

    Part 6: Enter Support Page<\/h2>\n

    Step 1: Support Page for Admins<\/h3>\n

    If you access the support page with an admin account, you\u2019ll be able to see all of the tickets and their status as you can see on the print screen below.\u00a0\u00a0\"ticket<\/p>\n

    Step 2: Register\/Log in Page for visitors<\/h3>\n

    However, if a visitor is visiting your website, they\u2019ll either have to create a new account or log in with an existing account.<\/p>\n

    \"ticket<\/p>\n

    Step 3: Support Page for Visitors<\/h3>\n

    Once they\u2019ve logged in, they\u2019ll see the following support page show up:<\/p>\n

    \"ticket<\/p>\n

    Step 4: Create New Ticket as Visitor<\/h3>\n

    They can easily create a new ticket by clicking on \u2018Create Ticket\u2019 in the right top corner. A ticket needs a category, subject, description and can contain images as well.<\/p>\n

    \"ticket<\/p>\n

    Part 7: View & Modify Ticket Information<\/h2>\n

    Step 1: View All Tickets<\/h3>\n

    To view all the tickets on your WordPress dashboard, go to uCare Support > Support Tickets<\/strong>.<\/p>\n

    \"ticket<\/p>\n

    Step 1: Assign Agent to Ticket<\/h3>\n

    Once you open a ticket, you can assign it to one of your agents, or to yourself.<\/p>\n

    \"ticket<\/p>\n

    Step 2: Change Status of Ticket<\/h3>\n

    Another thing you can do is change the status of your ticket.<\/p>\n

    \"ticket<\/p>\n

    Step 3: Change Priority of Ticket<\/h3>\n

    And if the ticket needs special attention, you can also change the priority of your ticket.
    \"ticket<\/p>\n

    Final Thoughts<\/h2>\n

    In this post, we\u2019ve shown you how you can add ticket support to the website you built with the free Divi SaaS layout pack. Adding ticket supports to your website helps you increase customer satisfaction by allowing your customers to ask questions at any time on your website. If you have any questions or suggestions; make sure you leave a comment in the comment section below!<\/p>\n

    Featured Image by AldanNi \/ shutterstock.com<\/em><\/p>\n<\/div>\n

    How to Add Ticket Support to Divi’s Free SaaS Layout Pack<\/a><\/p><\/blockquote>\n