Category Archives: Instructions/Guides

Getting Started Guide (New system, July 2014)

Thank you for your recent purchase of DemoWolf tutorials! We’ve gone to great lengths to make getting your tutorials up and running on your website as quick and painless as possible. Just follow these instructions, and you’ll have your tutorials up and running in no time :)

Step 1 – Go to “My Purchases” in Client Area
Click the “Client Area” link in the main menu of the DemoWolf website, and login with your client login details (which would have been emailed to you when you made your first purchase). If you’re already logged in, you’ll see the Client Area Dashboard.

From the Dashboard, click the My Purchases icon in the Account & Purchases section. This is where all your DemoWolf purchases will be listed, and it is from here that you can manage your order. If your order is not yet approved, that’s ok because there are still a few things you can do. Your order will be approved as soon as your payment has been confirmed. This usually takes less than an hour if your order was placed during regular business hours, but may take up to a week if for example you used a PayPal echeck to make payment.

2) Upload and Assign Your Logo to your Order
If you haven’t already uploaded a logo for a previous order, or want to upload a new logo for this order, now is the time to do it. You can upload a logo even before your order is approved. Simply click the “Select Logo” dropdown box under “Manage Your Order”,  and either select a logo you’ve already uploaded, or upload a new one from your computer. You can assign a different logo for each order you place. That makes it easy if for example you have multiple hosting brands for which you want tutorials, or if you want to resell our tutorials to your own clients. You’re able to manage multiple logos in your account.

3) Assign to Domain (optional)
If you have multiple domains for which you want to generate tutorials with different logos, then you can use our “Assign to Domain” feature to help you organize your logos.  This step is optional, and unnecessary if you only have one domain or business. If you want though, simply click the “Assign to Domain” dropdown box and either choose a domain you’ve already setup in your Client Area, or add a new one. You can add a new one from here, or from the Client Area Dashboard.

4) Create a Watermark Preset (only for Article Tutorials)
If you’ve purchased your tutorials in the Article format (formerly known as Text/Images format), the process is a bit different than for Flash or Video formats. Your logo will appear as a watermark in all the images within the tutorials, so you must specify how you want your logo to look. To do this, click the “Change Watermark Preset” dropdown box within the Manage Your Order section, and either choose an existing preset, or create a new one. Creating a watermark preset is how you define how your watermark will look in the images within the Article tutorials. You can define the position, size and opacity of your logo, and you can preview what it will look like before you generate your tutorials. The Opacity and Scale attributes of the watermark range from 0.0 (not visible at all) to 1.0 (the full opacity/size of the image). Once you’ve created a watermark preset, you can return to My Purchases, Manage Your Order, and assign it to your order.

What does “Generate” mean?
We frequently refer to the word generate. This refers to the process of branding your tutorials with your logo. the beginning and ending frames of the tutorial flash or video files with your logo. You’ll only be able to generate your tutorials one time, so you should use the Preview feature to make sure you like how your logo image looks in the tutorials. If you plan to have a new logo designed soon, you might want to wait to generate your tutorials, since there is a charge to re-generate your tutorials with a new logo.

5) Preview Your Tutorials 
When you add a new logo, or define a watermark preset for your order, our staff members are notified by email. You won’t be able to generate your tutorials until we approve your logo / preset. Logos and presets need to be approved to ensure tutorials will not be unbranded or white labelled; all tutorials must be branded for the company who will display them.

You’ll receive an email when your logo / preset has been approved, and then it’s time to generate your tutorials! REMEMBER– Be sure to Preview each format before generating, since as mentioned above you won’t be able to Generate more than once. For all Flash or Video formatted tutorials, click the “Preview SWF Format” icon to see a sample tutorial that’s been generated with your logo. It will look the same for SWF, MP4 or WebM video formats, but we only preview in Flash (SWF) format since the act of generating MP4 or WebM videos for preview takes quite a bit longer. For Article formatted tutorials, click the “Preview Text/Image” format icon.

6) Time to Generate!
You won’t be able to download your new tutorials without generating them first, so let’s do that now. Click the “Generate Tutorials” icon in the “Manage Your Order” section. On the next screen, click Proceed. Your generation request will now be placed in a queue. If generating in SWF or Text/Image formats, you will receive status updates, eventually ending with the words Rebrand Complete(that’s how you know the generation process has finished). If generating in MP4 or WebM format, keep an eye on My Purchases for your order’s status to change to Generated and the Download link to appear.

While you’re waiting, you might want to set up a Tutorial Viewer for your tutorials. Using the Tutorial Viewer is completely optional, however; feel free to come up with your own solution for displaying the tutorials!

Any remaining questions? Please don’t hesitate to open a support ticket!

WHMCS Integration: Logged-In Users Only

If you only want users that have logged into WHMCS to be able to view your tutorials, you’ll need to make some minor modifications to the dw-tutorials.php file (or whatever you now call it).

Change this code…
initialiseClientArea($pagetitle, $pageicon, $breadcrumbnav);

$templatefile = "dw-tutorials";
$smartyvalues["dw_content"] = $dw_content;
$smartyvalues["dw_head"] = $dw_head;

outputClientArea($templatefile);

…To this:
initialiseClientArea($pagetitle, $pageicon, $breadcrumbnav);

if (!empty($_SESSION['uid']) || !empty($_SESSION['adminid'])) {
  $templatefile = "dw-tutorials";
  $smartyvalues["dw_content"] = $dw_content;
  $smartyvalues["dw_head"] = $dw_head;
} else {
  $templatefile = "login";
  $smartyvalues["goto"] = "?goto=dw-tutorials.php";
}

outputClientArea($templatefile);

Make sure to replace ?goto=dw-tutorials.php with the correct name of dw-tutorials.php.

PHP Integration GUIDE

If you have any experience whatsoever with PHP, you’ll find it a breeze to integrate our Tutorial Viewer script with your website after you’ve read this article. The Tutorial Viewer script is free for all DemoWolf customers, whether they subscribe to their tutorials or purchase them outright, and PHP Integration is a feature of that script.

This article assumes you have already downloaded and extracted the latest Tutorial Viewer ZIP file, available in the My Subscriptions and My Purchases section of our Client Area. If you have not yet configured or downloaded your Tutorial Viewer and need help getting started, please see this article.

  1. Upload all the Tutorial Viewer files to a new folder on your server. For the purpose of these instructions, we’ll use /viewer/
  2. On your local computer, find the Tutorial Viewer files and navigate to the resources/integration/php/ folder.
    1. The file dw-tutorials.php is what you will upload to your main site directory. Use this file as a basis for creating one with your own site header and footer, and feel free to rename it to whatever you want.
      • There are two variables at the top of this file that you may need to edit: $uri_to_dw and $path_to_dw. If you have your Tutorial Viewer script uploaded anywhere other than a subdirectory of the your main site directory called viewer/, you WILL need to customize both of these variables.
      • There are three other variables in the file you should know about:
        • $dw_page_title contains the default title, or the title of whatever series or demo is being viewed. Put this in your site’s <title> element.
        • $dw_head contains the code to include all the necessary CSS and Javascript into your page. This variable should go at the very end of your <head> section.
        • $dw_content contains the list of tutorials. Put this in your <body>, inside your main page elements.
  3. After making any modifications to dw-tutorials.php, upload the file to the root directory of your site.

That’s it! Your Tutorial Viewer has now been integrated with your website!

Guide to Tutorial Viewers for Purchasers

1) What is the Tutorial Viewer?
The Tutorial Viewer is a tool we offer to all our clients, free of charge, that makes it easy for you to add a list of your tutorials to your website. There are two versions of this tool: the Dynamic version, which requires PHP 5.2 or higher to be installed on your server, and the Static version, which is just plain HTML and has no special requirements. We prefer the Dynamic version, and it is by far the most widely used version of the Tutorial Viewer. The Static version of the viewer does NOT support the MP4 and Text/Image formats; only SWF is supported at this time.

Don’t want to mess with setting up the Tutorial Viewer or integrating the script yourself? Our Integration Service has you covered!

2) Creating a Tutorial Viewer
Tutorial Viewers are created independently of your orders, so if you place multiple orders you can easily display ALL tutorials within your viewer, not just the ones from a single order. To create a Tutorial Viewer, click the Manage Tutorial Viewers link at the top of the My Purchases page, then click New Tutorial Viewer.

By default, the Tutorial Viewer will display ALL the tutorials you’ve purchased, but the “Which Tutorials to Display” option combined with the “Assign to Domain” feature next to every order lets you create viewers displaying different tutorials on different websites.

There are a number of Display Options that change the layout of the tutorials. You’ll find a preview of all the different Display Options here.

The Dynamic Run Mode is a setting that only applies to the Dynamic viewer. Which one you should use is dependent upon how you plan to integrate our Viewer with your website. If you use WHMCS, Kayako, or WordPress, you’ll find guides detailing how to integrate with these scripts here, as well as a guide on how to integrate using basic PHP.

You can also approach the integration from a different direction and instead customize the templates/tutorials.tpl file, adding your site’s header and footer HTML, in which case you’d leave the viewer set to Standalone mode.

The field labelled Static Version – Demo Path only applies to the Static version, and allows you to enter a URL or relative path to the folder containing your tutorial files. For example, if you plan to upload your Tutorial Viewer to viewer/ and your tutorial files to a subfolder named tutorials/, you would enter tutorials/ here.

The final option when creating a Tutorial Viewer allows you to choose which formats of tutorials to display in your viewer. This ONLY applies to the Dynamic viewer, since the Static viewer does NOT support any formats other than SWF at this time.

3) Installing Your Tutorial Viewer
Once you’ve created a Tutorial Viewer, when you return to the Manage Tutorial Viewers page you’ll see a link titled Download Tutorial Viewer. Download and extract this ZIP file, and upload all the files it contains to a NEW folder on your server (you could call it viewer/, or whatever you like).

3a) Extra Notes for the DYNAMIC Tutorial Viewer
When you first access the Tutorial Viewer in your browser, the script will attempt to auto-rename the includes/conf.new.php file to conf.php, but if this fails you will need to manually rename the file.

The Dynamic Tutorial Viewer will expect the tutorial files to be in a subfolder named tutorials/ by default, but you can change this by editing the $_CONF['demo_path'] and $_CONF['demo_uri'] values in the includes/conf.php file.

4) Uploading Your Tutorial Files
When your tutorials have finished generating and you can download them, extract those ZIP files to your computer. You will need to upload the series folders to your server to the following locations, depending on the format of the files:

  • Series folders for SWF files should go in tutorials/
  • Series folders for MP4 files should go in tutorials/mp4/
  • Series folders for Text/Image HTML files should go in tutorials/html/
  • Series folders for Text/Image image files should go in tutorials/images/

Any remaining questions? Please don’t hesitate to open a support ticket!

Getting Started Guide for Purchasers

Thank you for your recent purchase of DemoWolf tutorials! We’ve gone to great lengths to make getting your tutorials up and running on your website as quick and painless as possible. A quick read through the guide that follows should answer most of the questions you may have.

You’ll find a list of all your orders on the My Purchases page of our Client Area. This is where you’ll go to provide a logo to use for your tutorials and then generate and download them. Until we’ve approved your order and your logo, you won’t be able to generate your tutorials, but there are a few things you can do while you wait.

1) What does “generate” mean?
We frequently refer to the word generate. This refers to the process of branding the beginning and ending frames of the tutorial files with your logo. You’ll only be able to generate your tutorials one time, so you should use the Preview feature to make sure you like how your logo image looks in the tutorials. If you plan to have a new logo designed soon, you might want to wait to generate your tutorials, since there is a charge to re-generate your tutorials with a new logo.

2) Upload a Logo
Before you can generate your demos, you must upload a logo. Go to the Domains/Logos page of the Client Area, then click the Add a Logo button. Browse for a logo image on your hard drive. (For the Text/Image format, images on transparent backgrounds work best.) Submit the page, then return to My Purchases. If you’ve purchased your tutorials in either SWF or MP4 format, you can now use the Choose a Logo feature to assign the logo you just uploaded to your order.

2a) For Text/Image format: Create a Preset
If you’ve purchased your tutorials in the Text/Image format, the process is a bit different than for the other two formats. Your logo will appear as a watermark in all the images within the tutorials, so you must specify how you want your logo to look. At the top of the My Purchases page, click the Manage Image Settings Presets button, then the Add a Preset button. The first section of this page, entitled General Settings, allows you to give your preset a name and set a maximum width or height for the images themselves (not the logo watermark). The second section, Watermark Image Options, allows you to set the position, opacity, and scale of the watermark, and choose which logo image to use. The Opacity and Scale attributes of the watermark range from 0.0 (not visible at all) to 1.0 (the full opacity/size of the image).

Now that you’ve created a preset, you can return to My Purchases and assign it to your order using the Choose Image Settings Preset link.

3) Time to Generate!
When a new logo or Image Settings Preset has been assigned to your order, our staff members are notified by email. You won’t be able to generate your tutorials until we approve your logo / preset. Logos and presets need to be approved to ensure tutorials will not be unbranded or white labelled; all tutorials must be branded for the company who will display them.

You’ll receive an email when your logo / preset has been approved, and then it’s time to generate your tutorials! Each format you’ve purchased – SWF, MP4, and/or Text/Image format – is listed at the bottom of each order’s section. There are three possible actions listed next to each format: Preview, Download, and Generate. REMEMBER – Be sure to Preview each format before generating, since as mentioned above you won’t be able to Generate more than once. Also, tutorials in the MP4 format take a SUBSTANTIALLY longer time to generate than the other two formats (typically an hour per series), so you should be doubly certain that you’re ready to generate this format.

You won’t be able to Download without Generating first, so let’s do that now. Pick a format and click its Generate link. On the next screen, click Proceed. Your generation request will now be placed in a queue. As soon as any existing generation jobs complete, yours will begin. If generating in SWF or Text/Image formats, you will receive status updates, eventually ending with the words Rebrand Complete (that’s how you know the generation process has finished). If generating in MP4 format, keep an eye on My Purchases for your order’s status to change to Generated and the Download link to appear.

While you’re waiting, you might want to set up a Tutorial Viewer for your tutorials. Using the Tutorial Viewer is completely optional, however; feel free to come up with your own solution for displaying the tutorials!

Any remaining questions? Please don’t hesitate to open a support ticket!

Getting Started Guide for Subscribers

Thank you for signing up for a DemoWolf subscription! We’ve gone to great lengths to make the setup process as painless as possible. A quick read through the guide that follows should answer most of the questions you may have.

Whenever you need to make a change to your subscription, you’ll do that in the My Subscriptions section of our Client Area. If we haven’t activated your subscription, you won’t be able to generate your tutorials yet, but you will be able to do everything else.

1) What does “generate” mean?
We will frequently refer to the word generate. This refers to the process of branding the beginning and ending frames of the tutorial files with your logo. As a subscriber, you can generate your tutorials an unlimited number of times, but only the latest copy of the files will be available for display in your subscription.

2) Upload a Logo
Before you can generate your demos, you must upload a logo. Under Subscriptions you’ll notice a red link next to Choose a Logo that states No Logos Uploaded. Click that link. You will be taken to the Add a Logo page. Browse for a logo image on your hard drive. Submit the page, then return to My Subscriptions. You can now use the Choose a Logo feature to assign the logo you just uploaded to your subscription.

3) Choose Your Tutorials
Now it’s time to choose which tutorials you’d like to display. Click the View/Edit Series Selection link. You should see a list of ALL of DemoWolf’s tutorial series, and each one has a checkbox next to it. You’ll need to tick the checkboxes next to each of the series you want, then scroll down and hit Submit. Once you’ve submitted the form, you will see a screen confirming which tutorials you’ve selected; if you see any that you mistakenly chose, tick the Exclude checkbox next to a series and it will be removed from your selection. NOTE – Your selection will not be saved until you hit Submit one more time on this confirmation page.

Some things to remember when editing your Series Selection:

  1. Be sure to take note of how many series you’re allowed, and whether you can have voice versions or not.
  2. If you’d like the Voice versions of all the demos, deselect Non-Voice at the top of the page and then select the Voice checkbox next to it.
  3. If you want to mix and match Voice and Non-Voice and Non-English tutorials, click the + next to a series’ title.
  4. When you return to edit your Selection later, you’ll be sent to the confirmation screen first. Click the Modify Selection button to get back to the full series list.

4) Time to Generate!
As soon as you submit the confirmation page, you’ll receive a notice that your “selection has been saved to the database”. Beneath that are buttons that will let you generate your tutorials: Generate Entire Subscription will generate everything you’ve picked, and Generate New Demos Only can save a lot of time if you’ve just added a single new series to your list. (Both of these links are also available on the My Subscriptions page.)

Since you’re just starting out, choose the first one and generate the entire subscription. On the next screen, click Proceed. Your generation request will now be placed in a queue. As soon as any existing generation jobs complete, yours will begin. You will receive status updates, eventually ending with the words Rebrand Complete (that’s how you know the generation process has finished). While you’re waiting, you can go ahead and move on to the next step: setting up your Tutorial Viewer.

5) What is the Tutorial Viewer?
Our subscription system is based around a PHP script called the Tutorial Viewer. The main requirement to run the Tutorial Viewer script is that you have PHP 5.2 or higher installed on your server. Don’t want to mess with setting up the Tutorial Viewer or integrating the script yourself? Our Integration Service has you covered!

You can download the script from the My Subscriptions page by clicking the Download Tutorial Viewer link. Extract this ZIP file, and upload all the files it contains to a NEW folder on your server (you could call it viewer/, or whatever you like).

Now, access the Tutorial Viewer directory in your browser (for example, http://www.yourdomain.com/viewer/). Assuming your tutorials have finished generating, you should see a list of all the tutorials you just selected.

The script will attempt to auto-rename the includes/conf.new.php file to conf.php, but if this fails you will need to manually rename the file.

NOTE: If you notice any errors, you may need to CHMOD one file and one directory (likely because your server doesn’t use suPHP or PHPSuExec):

  • CHMOD the includes/conf.php file to 0666
  • CHMOD the cache/ directory to 0777

6) Customize your Display Options
Not happy with the default look of the Tutorial Viewer? There are a number of Display Options that change the layout of the tutorials, available to you via a subsection the My Subscriptions page. You’ll find a preview of all the different Display Options here. The Display Options form also lists Run Mode as an option; which one you should use depends upon how you plan to integrate our Viewer with your website (see the following section for details).

Any changes made to your subscription’s Display Options should take effect instantly on your live Tutorial Viewer. If they do not, please go to the Access Settings subsection and verify that the “Complete URL to request.php” corresponds to the location of request.php on your server (for example, http://www.yourdomain.com/viewer/request.php). Alternatively, you can manually delete the contents of the cache/ directory to the same effect.

7) Integrate with your website
You will probably also want to Integrate your Tutorial Viewer with your website. If you use WHMCS, Kayako, or WordPress, you’ll find guides detailing how to integrate with these scripts here, as well as a guide on how to integrate using basic PHP.

You can also approach the integration from a different direction and instead customize the templates/tutorials.tpl file, adding your site’s header and footer HTML, in which case you’d leave the viewer set to the Standalone run mode.

Any remaining questions? Please don’t hesitate to open a support ticket!

WordPress Integration GUIDE

WordPress Integration lets you embed our Tutorial Viewer script within WordPress, making it look just like any other part of your site. The Tutorial Viewer script is free for all DemoWolf customers, whether they subscribe to their tutorials or purchase them outright, and WordPress Integration is a part of that script.

This article assumes you have already downloaded and extracted the latest Tutorial Viewer ZIP file, available in the My Subscriptions and My Purchases section of our Client Area. If you have not yet configured or downloaded your Tutorial Viewer and need help getting started, please see this article.

You can have your tutorials up and running inside WordPress within minutes by following these simple steps:

  1. Upload all the Tutorial Viewer files to a new folder on your server. For the purpose of these instructions, we have WordPress installed in /blog/ and the Tutorial Viewer in /blog/viewer/
  2. On your local computer, find the Tutorial Viewer files and navigate to the resources/integration/wordpress/ folder.
    1. This folder contains only one file: dw-tutorials.php. There are two variables at the top of this file that you may need to edit: $uri_to_dw and $path_to_dw. If you have your Tutorial Viewer script uploaded anywhere other than a subdirectory of the WordPress directory called viewer/, you WILL need to customize both of these variables.
  3. After making any modifications to dw-tutorials.php, upload the file to the root directory of WordPress.
  4. Install and Activate the Shortcode Exec PHP plugin for WordPress (Plugins > Add New). This allows you to enter PHP code in your posts and pages.
  5. Go to Tools > Shortcode Exec PHP and scroll down to the Shortcodes section. Create a new Shortcode named demowolf and enter the following PHP code:

    extract(shortcode_atts(array('series' => '', 'demo' => ''), $atts));
    empty($_GET['series']) and $_GET['series'] = $series;
    empty($_GET['id']) and $_GET['id'] = $demo;

    if (!empty($_GET['id'])) {
    define('DEMO_MODE', true);
    }

    require "dw-tutorials.php";

  6. Create a new WordPress page to use for embedding the Tutorial Viewer (Pages > Add New). With the shortcode we created, you can easily display ALL your tutorials simply by typing [demowolf] in a WordPress page. To force a specific series to show up, you will first need to find the ID of the series (view your Series Selection on My Subscriptions or My Purchases in our Client Area if you need a list of IDs). For example, to show ONLY the cPanel series, use the following shortcode in a page: [demowolf series="289"]
  • To show ONLY a specific tutorial in the series, you can further specify the tutorial’s ID. For example: [demowolf series="289" demo="6356"].

That’s it! You now know how to integrate the Tutorial Viewer with WordPress!

Kayako 4 Integration GUIDE

Integration is for those of you that want the Tutorial Viewer to be integrated seamlessly with your helpdesk. You will essentially be wrapping your existing Kayako theme around the Tutorial Viewer. The Tutorial Viewer script is free for all DemoWolf customers, whether they subscribe to their tutorials or purchase them outright, and Kayako Integration is a part of that script.

This article assumes you have already downloaded and extracted the latest Tutorial Viewer ZIP file, available in the My Subscriptions and My Purchases section of our Client Area. If you have not yet configured or downloaded your Tutorial Viewer and need help getting started, please see this article.

You can have your tutorials up and running inside Kayako within minutes by following these simple steps:

  1. Upload all the Tutorial Viewer files to a new folder on your server. For the purpose of these instructions, we have Kayako installed in /kayako and the Tutorial Viewer in a subfolder of Kayako, /kayako/viewer/
  2. On your local computer, find the Tutorial Viewer files and navigate to the resources/integration/kayako4/ folder.
    • You’ll need to upload everything inside this folder to the root directory of your Kayako installation. If your Tutorial Viewer is anywhere except in a subfolder named “viewer/”, you WILL need to update two PHP variables in dw-tutorials.php: $path_to_dw and $uri_to_dw
  3. Go to your Kayako Admin Dashboard. In the Options menu at left, click Modules. You will see a new Module called Video Tutorials. Click its name, then click Install. This will create and enable a Video Tutorials widget, which you can control on the Widgets page. By default, the Widget will show up on your Kayako homepage and in the main menu.
    • Each widget has two icons, so you’ll need to upload some for your new Video Tutorials widget. We’ve provided you two possible icons in several different sizes and formats, on either a transparent or white background. You might want to use one of those, or feel free to use your own. See the resources/integration/icons/ folder. The Kayako 4 integration script requires that the icons be named icon_widget_tutorials.png and icon_widget_tutorials_small.png and be placed in your theme’s images/ path. For the default theme, you’ll want to use the 35×35 and 16×16 transparent PNG files.
  4. (Optional) You should add the following code to your Kayako theme’s header template to improve the loading time of the CSS and Javascript used by the Tutorial Viewer script. Again in the Options menu at left, click Templates, then Groups.
    • View the Templates for whichever template group you’re using.
    • Under General, you’ll see a template named header. Edit it.
    • Directly before this line:
      </head>

      Add:

      <{if $dw_head}><{$dw_head}><{/if}>
  5. That’s it! Your Tutorial Viewer should now look just like any other area of Kayako.

Kayako 3 Integration GUIDE

These instructions apply to Kayako version 3. Click here for Kayako 4 instructions.

Integration is for those of you that want the Tutorial Viewer to be integrated seamlessly with your helpdesk. You will essentially be wrapping your existing Kayako theme around the Tutorial Viewer. The Tutorial Viewer script is free for all DemoWolf customers, whether they subscribe to their tutorials or purchase them outright, and Kayako Integration is a part of that script.

This article assumes you have already downloaded and extracted the latest Tutorial Viewer ZIP file, available in the My Subscriptions and My Purchases section of our Client Area. If you have not yet configured or downloaded your Tutorial Viewer and need help getting started, please see this article.

You can have your tutorials up and running inside Kayako within minutes by following these simple steps:

  1. Upload all the Tutorial Viewer files to a new folder on your server. For the purpose of these instructions, we have Kayako installed in /kayako and the Tutorial Viewer in a subfolder of Kayako, /kayako/viewer/
  2. On your local computer, find the Tutorial Viewer files and navigate to the resources/integration/kayako3/ folder.
    • The only file in here is named dw-tutorials.php. This is what you will upload to the Kayako directory for your clients to access. Feel free to rename the file to whatever you want.
      • There are two variables at the top of this file that you may need to edit: $uri_to_dw and $path_to_dw. If you have your Tutorial Viewer script uploaded anywhere other than a subdirectory of the Kayako directory called viewer/, you WILL need to customize both of these variables.
  3. After making any modifications to dw-tutorials.php, upload the file to the root directory of Kayako.
  4. (Optional) You should add the following code to your Kayako theme’s header template to improve the loading time of the CSS and Javascript used by the Tutorial Viewer script. Go to your Admin Dashboard, then in the Options menu at left, click Templates, then Manage Groups.
    • View the Templates for whichever template group you’re using.
    • Under General, you’ll see a template named header. Edit it.
    • Before this line:
      <{if $ismodernbill == false && $ismodernbillv5 == false && $iswhmcs == false}></head>

      Add:

      <{if $dw_head}><{$dw_head}><{/if}>

       

  5. (Optional) You may want to add an entry to Kayako’s index page linking to dw-tutorials.php (or whatever you’ve called it). You’d do this by editing one of Kayako’s files: includes/Widgets/widgets.php. Open this file. Roughly halfway down the page, you will see code similar to the following. You will need to add everything after: // DemoWolf Integration
    // ======= KNOWLEDGEBASE =======
    if ($module->isRegistered(MODULE_KNOWLEDGEBASE) && $_SWIFT["settings"]["kb_enableclient"] == 1 && $_SWIFT["user"]["permissions"]["perm_canviewknowledgebase"] != "0")
    {
    $_widgets[$index]["icon"] = $_SWIFT["themepath"]."knowledgebase.gif";
    $_widgets[$index]["title"] = $_SWIFT["language"]["knowledgebase"];
    $_widgets[$index]["description"] = $_SWIFT["language"]["desc_knowledgebase"];
    $_widgets[$index]["link"] = iif(defined("ISMODERNBILL"), "user.php?op=menu&tile=faq&_m=knowledgebase&_a=view", "index.php?_m=knowledgebase&_a=view");
     

    $template->assign("cansearch", true);
    $template->assign("kbcansearch", true);

    $index++;

    // DemoWolf Integration
    $_widgets[$index]["icon"] = $_SWIFT["themepath"] . "tutorials.gif";
    $_widgets[$index]["title"] = $_SWIFT["language"]["tutorials"];
    $_widgets[$index]["description"] = $_SWIFT["language"]["desc_tutorials"];
    $_widgets[$index]["link"] = "dw-tutorials.php";

    $index++;
    }

    • Customize $_widgets[$index]["icon"] to whatever image you'd like to use. It should go in your theme's image folder, i.e. themes/your_theme/.
    • We've provided you two possible icons in several different sizes and formats, on either a transparent or white background. You might want to use one of those, or feel free to use your own. See the resources/integration/icons/ folder.
    • Customize $_widgets[$index]["link"] to whatever you named dw-tutorials.php.
  6. (Optional) Finally, you must enter the text to show for the Widget you just added to your Kayako homepage. Return to the Admin panel, then go to Options > Languages > Manage Phrases.
    • Click Insert Phrase.
    • Create a new phrase with Identifier set to tutorials. Section should be default. Text is whatever title you want, such as "Video Tutorials".
    • Then create another new phrase. Identifier: desc_tutorials, Section: default. Text could be something like "Watch video tutorials on a variety of topics."
  7. That's it! Your Tutorial Viewer should now look just like any other area of Kayako.

WHMCS Integration GUIDE

Our WHMCS Integration method is perfect for embedding the Tutorial Viewer script within your WHMCS theme, making it look just like any other part of your site. The Tutorial Viewer script is free for all DemoWolf customers, whether they subscribe to their tutorials or purchase them outright, and WHMCS Integration is a part of that script.

This article assumes you have already downloaded and extracted the latest Tutorial Viewer ZIP file, available in the My Subscriptions and My Purchases section of our Client Area. If you have not yet configured or downloaded your Tutorial Viewer and need help getting started, please see this article.

You can have your tutorials up and running inside WHMCS within minutes by following these simple steps:

  1. Upload all the Tutorial Viewer files to a new folder on your server. For the purpose of these instructions, we have WHMCS installed in /clients/ and the Tutorial Viewer in a subfolder of WHMCS, /clients/viewer/
  2. On your local computer, find the Tutorial Viewer files and navigate to the resources/integration/whmcs/ folder.
    1. Upload dw-tutorials.tpl to your WHMCS theme’s templates folder, for example: /clients/templates/default/
      • If you aren’t sure what your template is called, go to the WHMCS Admin Panel and see the Settings > General Settings page.
    2. The file dw-tutorials.php is what you will upload to the WHMCS directory for your clients to access. Feel free to rename this file to whatever you want. Please note that special care must be taken if you want to call this file tutorials.php, since WHMCS has its own file with this name and our file is NOT the same and will likely be overwritten when you update WHMCS.
      • There are two variables at the top of this file that you may need to edit: $uri_to_dw and $path_to_dw. If you have your Tutorial Viewer script uploaded anywhere other than a subdirectory of the WHMCS directory called viewer/, you WILL need to customize both of these variables.
  3. After making any modifications to dw-tutorials.php, upload the file to the root directory of WHMCS.
  4. (Optional) If you’re running a version of WHMCS prior to version 5.0, you should add the following code to your header.tpl file to improve the loading time of the CSS and Javascript used by the Tutorial Viewer script. Right before the </head> tag, add the following:
    {if $dw_head}
    {$dw_head}
    {/if}
  5. (Optional) Depending on your theme, you might want to add an entry to the homepage.tpl file linking to dw-tutorials.php (or whatever you’ve called it). Simply copy and paste one of the other blocks on this page (such as Knowledgebase) and modify it. If you need any assistance with this, let us know.
      a. We’ve provided you two possible icons in several different sizes and formats, on either a transparent or white background. You might want to use one of those, or feel free to use your own. See the resources/integration/icons/ folder.

That’s it! Your Tutorial Viewer has now been integrated with WHMCS!