Installation & User Guide

Transcription

1 Copyright Cotek Systems Inc. All rights reserved.

2 Corporate Headquarters 3722 Pleasantdale Rd Ste 6 Atlanta, GA USA Sales Support Please be patient while waiting for response. (24/7 Support!) Phone: +1 (877) Ext 0 Sales: sales@cotekinc.com Contact Info Cotek Systems, Inc Pleasantdale Rd, Atlanta, GA Toll Free: International: FAX: Support: support@cotekinc.com Billing: billing@cotekinc.com Website:

3 Table of Contents Getting Started 4 Introduction Activating How to create a new slide. Customizing your existing slides. How to delete a slide Slider Settings 10 How to configure the slider (Backend) Adding slider to your page (Frontend) Uninstalling the add-in from your site. FAQs Demos

4 Section 1: Getting Started 1.1 Introduction: Want to impress your Customers or organization with eye-catching lively images right on your site? With add-in, creating and showing a series of sliders are never easier. lets you replace the default SharePoint slideshows with a much more sophisticated presentation. The slider can be enabled or disabled from anonymous users. You can adjust the size of the slider by using the client web part properties. Features include: Simplified architecture o From creating a slider to adding your slider to your page. We made the whole process very easy. 's user interface supports browse/upload. We made the process so easy for you. Add Links or button to each slide o With Smart Responsive slider, you can add a link to a page, site or subsite and specify if the link should open in new tab or the same window. Supports Captions o From the setting s page, you may choose to hide or show slide caption for each image. Caption gives more details about the slide.

5 Slide Ordering o You can order slides or have them displayed randomly. Just make sure specify the order during slide creation. However, if you forget, you can always go back to edit the slide. Fully responsive with all devices o As the name implies, this slider add-in is highly responsive. You can also adjust the width of the Slider content area by editing the slider client web part properties. Fast loading time for slider and administration page. o We make very few round trips to the server to post or retrieve information. The slider is design to run client side using JQuery. Preview slider with the position chosen o You can preview all your changes before you go live for everyone to see. will preview changes from the administration page before adding to the client web part on your page. Supports Slider URL o Create sliders with many information such as URL, banner image as well as assign an order for it to appear on a slider. Create sliders with different effects and showing time o Smart Responsive slider supports more than ten (10) transitions and animation effects. Multiple Slider Templates (Design) o News highlight, Employee spotlight, Customer's testimonials, quotes etc. We have it all. Add testimonials and quote to your site by selecting the template. Auto-resizing o Can select sliders which allow auto-resizing the images to fit the position.

6 Add your own CSS stylesheet o With, you can create your own slider style by inserting custom CSS codes. 24/7 Support o Your satisfaction is our pleasure. We are here for you. If you have any questions, don't hesitate to contact us. We will be happy to help you. 1.2 How to activate your slider: To activate the slider, navigate to the Settings page and enter your product key at the top right corner of the page. See screenshot below;

7 1.3 How to create a new slide: There are two routes you can use to create a new slide. You can use the left menu and click Add Slide or return to main landing page and click Create new Slide button. Specify whether this document will be visible from the browser by checking the visibility button. Select the slide order. You can specify if the new slide will be first, Second, third, fourth, or fifth slide. However, if you have more than 5 slides, and the new slide position is above the fifth position, select Custom from the dropdown and enter a number for the new slide position. Enter title for the new slide. The slider title is not required but highly recommended. Also enter hyperlink for the new slide. Remember this is the link for slide button. We recommend entering the full URL including or For example, Specify if link (URL) will be open in the same window or new tab (window). Enter text for the button. For example, Visit Store Now Enter description Select image for the slide. And finally click Create Slide button.

8 1.3 Customize your Slide: Installation & User Guide To edit your slide, hover over the slide image from the main landing page table. When you hover over the image, the edit button will appear. Click the Edit Slide button to open the edit slide page.

9 Edit your slide and click Save Slider Changes. 1.4 How to delete a slide: To delete a slide; Go to Smart Slider main landing page and search for the slide you want to delete. You can search by title, description, or keywords. Hover over the image to expose the delete button. See screenshot below;

10 A popup will appear to confirm the delete action. If you really want to delete the slide, click Delete Slide button and you are done. The Slide will be deleted permanently. 2.1 How to configure your slider: In backend, the administrator can manage sliders, preview available slider styles and configure the settings. Go to Smart Slider Settings page. The settings page will look as follows. Change Chrome Type from Default to None if you want to remove the title of the Web Part. You can also change the title using this Web Part properties manager.

11 Now expand Cotek Slider Configuration and enter Slider Interval. Slider interval is in second. By default, slides plus animation runs every 8 seconds but you can change that. However, we recommend at least 7 seconds to give enough time for animation and also time for people to read the text (e.g. news) before clicking the button on the slide. - You can also select slider transition effect. By default, Popup animation is used. Popup animation causes the image to jump from behind the page and expands as it comes up. There are several other animations like: o Slide Right to Left o Image Fade Effect o Speed of Light o Flip in X o Bounce in Down o Bounce in Up o Bounce in Left o Bounce in Right o Zoom in Up o Zoom in Left o Zoom in Right You can also specify width but since the add-in is responsive, it will automatically adjust the app part to fit the width.

12 2.2 How to add slider to your page. In front, the users can add sliders to the page just like you add a regular app part or web part. To add the Smart Slider to your page; Click the gear icon at the top right corner of your page. Click on edit page Click Insert tab and select App part or Web part Look for. In some cases, you might need to scroll if you have a lot of web parts installed. Select title and click the Add See screenshot below.

13 2.4 Uninstallation procedure. To uninstall the app, click on Site Settings gear icon on the top right corner of the page and select site contents. Click on the three little dots on the top right corner of the app name. Another window will open. Finally click Remove A confirmation popup will open demanding your confirmation to remove the app. Click ok and you are done. The process can take about 2 mins depending on your environment. Please see screenshot below for detailed instructions. 2.5 FAQs Question: What is? Answer: SharePoint Add-in/Web part for adding slideshow style functionality to your SharePoint pages. Unlike other SharePoint Add-ins that are only available to your intranet, is available to your intranet, extranet and internet public facing sites. Request a live demo today from store.cotekinc.com.

14 Question. Does it also work with anonymous users and Office 365 Public facing site? Answer: Yes, is available to anonymous users. However, for Office 365 public facing sites, this feature has is turned off by default. It can be enabled from the Slider Configuration page. Question: Is this App Part Responsive? Answer: Yes! You don t have to define width or embed any custom codes in iframes. The widget automatically adjusts to fit any space you give. It also shrinks or expands as you reduce or increase the screen size. Also adjust itself on mobile devices 2.5 DEMOS. These are some examples of the Smart Slider designs. Go to Smart Responsive slider administration page to view all the slider designs Slick Animated Design

15 2.3.2 Left Animated Slider Cotek Slider Design

16 2.3.4 Full Carousel Style

17 2.3.5 Default thumbnail slider

18 D Smart slider

19 2.3.7 News Highlight Format