unbranded partner-site-customization-guide

Unbranded Partner SiteCustomization Guide

2

If you have any problems customizing your Partner Site, please submit a Technical Support Request from your Partner Portal and make sure to attend the weekly Live Training. We do not, however, offer support for HTML, CSS or Javascript related queries.

Contents

3 Hi There!4 Customization Checklist5 Site Tour15 What You Need16 How to use Triangle20 Site Structure22 Customization

3


Hi There!

Congratulations on joining the Business Catalyst Partner Program.

Bundled with what you receive as a BC Partner is a free Unbranded Partner Site. By default, your site includes all the features that our most success-ful Partners use to grow their design businesses, built-in. You’ll most likely want to customize it yourself, so in this guide we’ll run you through how to completely rebrand the site to suit your business.

We’ve included 5 unique themes that you can easily switch between. All you have to do is rename a CSS file. Find out how under the “Customiza-tion” section of this guide.

Let’s get started.

4


Customization Checklist

We’ve put together a quick checklist of essential customizations you need make to your Partner Site:

o Upload your Logo Upload your own logo, so it appears in the header of your Partner Site. See page 14 to find out how.

o Update the “Free Trial” button links (Rebranding Partners Only)If you’re a Rebranding Partner, it’s important that you redirect the Free Trial buttons on the Home page and Pricing page to your rebranded Online Busi-ness Builder.

o Change the pricing table to suit your design businessYou most likely have your own pricing structure that takes into consider-ation the value you add on top of the BC platform. Edit the Pricing page to suit what you charge your clients.

o Change the email address on the “For Designers” PageBy default, the “For Designers” page (your way of signing up Resellers and making commissions) directs enquiries to a faux email address. Replace this with the email address you wish to be contacted at.

o Change the name in Privacy Policy and Terms of UseYou’ll want to “Find & Replace” [Partner] in the included Privacy Policy and Terms of Use.

o Change Address on Contact Us pageNext to the Contact form on your “Contact Us” page, there is a false ad-dress that needs to be either replaced with your office address or removed.

o Upload your own designs to your PortfolioYour Portfolio page uses a Web App to store site showcases. Find out how to upload your own designs on page 15.

o Configure Customer Service TicketingYour Support request form is already set up to use Customer Service Tick-eting and directs to your support@ email address. In order to take advan-tage of this functionality, you need to configure CST from your Admin Con-sole. Find out how on page 16.

5


Site Tour

First up, let’s go for a quick run through of your brand new Partner Site, pointing out how we’ve implemented each feature. You’ll notice that we’ve outlined the module being used, and how you can access or modify it. For more information on specific modules, please consult the Online Business Wiki (onlinebusinesswiki.com) and make sure you attend the core live train-ing.

Home (/home)

This is the first page your existing and potential clients will see when they visit your site. By default, it includes:

� The Unbranded Online Business Video � A “Take a Free 30-Day Trial” button as a call to action (only available to

Rebranded Partners) � Headline, Benefits & Main Features

From anywhere on your site, your clients are able to a) Login to their Client Portal to view past orders / support cases and b) Login to the Admin Con-sole of their actual site. Find out how to give clients access to their Client Portal in the “Customization” section of this guide.

Tip: If you’re a Rebranding Partner, using highly visible and clickable “calls to action” such as Free Trial buttons will help you push more prospects through your sales funnel.

6


7


Overview (/overview)This page contains a more detailed walkthrough of the features included in the All-In-One solution. By default, it follows this structure:

� Main Features � Full Features � Shipping Providers � Payment Gateways � Detailed Tour

8


Portfolio (/portfolio)We’ve already set up a Portfolio page for you to showcases your designs. This page is linked to the Portfolio Web App in the backend of your Partner Site - so adding new designs is easy. Find out how under the “Customiza-tion” section of this guide, or read more about Web Apps here (link: http://www.onlinebusinesswiki.com/index.php?title=Web_apps)

Tip: Showcasing your previous work is a great way to convince clients that you’re worth paying for. Show them the level of customization you provide and list the range of features you’ve implemented.

9


Pricing (/pricing)This page contains our standard monthly billing table, including the Mini ($39), Regular ($59), and the Super ($79), each with a Free Trial button be-low. By default, the page also includes a “What you get” section and what we charge for Extras such as extra disk space, newsletters and users.

Tip: Change the pricing on this page to suit your individual pricing structure, taking in to consideration your value-adding design/copywriting/SEO services.

10


For Designers (/designers)The “For Designers” page provides information for your fellow web design-ers and, by default, directs them to your partners@ email address for more information. This is a great way to sign up designers as resellers and earn extra revenue in the form of commission. If you don’t wish to resell the solu-tion, simply disable the page and remove the menu item.

Support (/support)This is the page your clients will navigate to for Support purposes. By de-fault, the first tab they see directs them to helpful unbranded video tutorials and the Online Business Wiki.

If they require email support from you, we’ve also included a ready made Support Request form that will notify you every time a request is submitted. Find out more about the Web Forms module used on this page here. (link: http://www.onlinebusinesswiki.com/index.php?title=Web_forms)

Clients are also able to download the unbranded Dreamweaver Extension “Triangle” from the Support section.

11


Client Portal (/secure-client-portal)The “Client Portal” is a Secure Zone we’ve set up for your paid clients, so they can view a history of any orders you’ve assigned them and a list of every Support Request they’ve lodged using the Support Form on the “Sup-port” page.

12


To give clients access to the Client Portal, you must manually assign each one a username (use their primary email address) and password (use their current password), then subscribe them to the Client Portal secure zone. Find out how to do this under “Client Portal” in the Customization Section of this guide, or read more about Secure Zones here (http://www.onlinebusi-nesswiki.com/index.php?title=Secure_zones)

Once you have assigned them a username and password, they will be able to login by clicking the “Client Portal” menu item on your Partner Site:

About (/about)We’ve intentionally left this page blank, so you can jump in and fill it with important information about your design business. Talk about your history, experience and areas you specialize in.

13


Contact (/contact)On this page, be sure to change the Address to your own. We’ve built-in a working Contact Us form that will notify you and the users of your Partner Site every time an enquiry is submitted. To find out more about Web Forms and how to customize them, read this article (link: http://www.onlinebusi-nesswiki.com/index.php?title=Web_forms)

Terms & Privacy Policy (/terms-of-use, /privacy-policy)We’ve fitted out your site with standard, ready to go, Terms of Use and Privacy Policy pages. All you need to do is replace “[Partner]” (without quota¬tion marks) with the name of your business. Tip: Use the “Find & Replace” option (available in most HTML/Text editors - CTRL + F in Dreamweaver) to quickly go through and replace the name.

Tip: Use the “Find & Replace” option (available in most HTML/Text editors - CTRL + F in Dreamweaver) to quickly go through and replace the name.

14


15


What You Need

In order to customize your unbranded partner site with ease, you’ll need the following:

� Adobe Dreamweaver (http://www.adobe.com/products/dreamweaver/)

� Triangle Extension (http://businesscatalyst.com/triangle)

� FTP Client Login Details

� Server: your-site.com � User Name: your-site.com/[email protected] � Port: 21 � Check: Use passive mode for data transfers

� Firebug Add-on for Firefox Firebug is a web development add-on for Firefox that lets you:

� Inspect and edit HTML � Tweak CSS instantly without updating the CSS file on the server � Visualize CSS metrics � Go to http://getfirebug.com to learn more

16


How to use Triangle

What is Triangle?Triangle is our Adobe Dreamweaver extension that lets you inject Online Business functionality into your HTML.

Adding Triangle extension to Adobe DreamweaverSimply double click on the TriangleExtension.mxp file and the extension will install itself.

17


Creating a new webpageOpen Dreamweaver, click on Window (next to Help) and you should be able to find Triangle at the bottom of the dropdown menu. Click on Triangle:

� Enter your login details, then click “Login”

� Choose your Unbranded Partner website from the website list and click “Load” � Click the “Web Pages” tab � Click “New” � In the document window, type “The Page of Awesome” � In the Triangle panel select the folder you want the new webpage to be in

(“/” is the root folder) � Tick “Start Page” if you want this page to be the start page of your website � To save the work-in-progress page, without publishing it, click “Save”; the

page will be saved in the database as a Working Copy and you won’t be able to access it via FTP. To publish the page and make it live, click Save and Publish WARNING: The content of the selected document window will be saved when you click “Save” or “Save and Publish” - so watch out if you have lots of document windows opened. Make sure “Current Webpage” in the Triangle Panel matches the selected document window.

18


Editing a Webpage � Click on the webpage you’d like to edit � Click the “Load Live” button to load a published webpage / Click “Load

Working” to load an unpublished webpage

Removing a webpageLoad the webpage, check “Deleted” and then click “Save and Publish” or simply delete the webpage via FTP.

19


Rolling back a webpageOlder versions of a webpage are archived and kept in the database. To roll-back a webpage, simply click on “Archive” and select the version you want to rollback.

20


Site Structure

Site Map

Template and PagesAll templates must have the {tag_pagecontent} tag; place {tag_pagecontent} where you want the webpage content to sit in the tem-plate.

Main Features (slider)

Home

OverviewPortfolio

(web apps)Pricing

For

Designers

Support

(slider)About us

Contact us

(web form)

Unbranded Partner Site IA

Content

Management

eCommerce

Email

Marketing

CRM

Report and

Analytics

Website

Showcases

(lightbox)

Client Portal

(secure-zone)

Free Trial

(online

business

builder)

Video

Tutorials

Wiki

(external link)

Download

Triangle

(literature)

Support

Request

(web form)

Shipping

Providers

Full Features

Detailed Tour

Payment

Gateways

21


Template

Final Page, what customers see.

Web Page

Web Page Content

Site Navigation Menu

Header including logo

Footer

Web Page Content

Header including logo

Footer

Site Navigation Menu

22


Customization

You’ll notice that the site look better in Firefox & Safari. This is because we’ve used the “border-radius” property in CSS3 which is not supported by IE8 or below.

CSS Files / ThemesFound in the StyleSheets folder

� ups-screen.css - CSS for the look and feel of the templates � ModuleStylesheets.css - CSS for modules e.g. Catalogs, Products, An-

nouncements etc. � ie.css - CSS for IE6 (based on Blueprint CSS Framework 0.8) � theme.css - this style overwrites the color scheme of ups-screen.css,

remove this file to use the default colors � theme-xxxx.css - there are 5 themes provided; to apply a theme, simply

rename the desired theme-xxxx.css to theme.css

Logo � Class fixPNG in <img> exists to make the 24-bit transparent PNG work in

IE6 � To change the position of the logo, edit the top property in a#logo selec-

tor in ups-screen.css

Color SchemeCustomize the color scheme of the site easily by editing one of the theme-xxxx.css files and applying it, as shown above.

Navigation - Dynamic MenusThere are two dynamic menus: the “Website Main Menu” (global naviga-tion), and the “Overview Menu” - both menus are present in the footer

The menus are running in CSS-Only mode, so you can customize them

23


using CSS. Look for the #container-nav and .nav-side selectors in upsscreen.css to customize them.

Page Content LayoutChanging the page content layout takes only a few seconds once you understand how the Blueprint CSS framework works. Check out http://your-site.com/grid-tutorial and view the source code.

Slider � “Coda Slider” was used on the Overview page and Support page; to

customize, read the instructions and how-to’s at http://www.ndoherty.com/blog/2007/10/29/coda-slider-11/ � Do not replace the jQuery files with jQuery 1.3, as the Coda Slider may

not work

Free Trial Buttons (Rebranding Partners only) � By default, the “Free Trial” buttons on your Partner Site need to be linked

manually to your Rebranded Online Business Builder � From your Partner Portal, navigate to the “Resources” page and scroll

down. On the right hand side of the page, under “Integrated Sign-Up and Login on your Website”, you’ll see a link that looks like this: http://yourpart-nersite.com/signup/obb.aspx?SPID=12345 - Copy the URL and direct all new and existing “Free Trial” buttons to this address � Direct clients to http://yourpartnersite.com/admin for logging in to their

Online Business Console

Web Apps � A Web App is used for the Portfolio page so the website showcases can

be managed easily � To add new designs to your Portfolio, navigate to Modules > Web Apps

> Portfolio. Click “Create A New Web App Item” and then fill out the de-sign details, including the path of a large image and a thumbnail image (282x182px) of the site � To edit the HTML layout of each Web App Item, open the Dreamweaver

Triangle extension and go to the “Custmization List” by clicking on the small icon above “Help”. Scroll down and click on Web App Layouts, select Port-

24


folio > Portfolio List then click “Load”. If you’re wondering where the <ul> is, it’s inside the Portfolio page content

Client PortalEach time you sign up a new client on a monthly paid plan, you must manu-ally replicate their login details next to their customer record, and then sub-scribe them to the Client Portal secure zone. Follow these steps:

Step 1: Navigate to the Customers section of the Admin Console of your Partner Site

Step 2: Either select the existing customer record (if the client already exists in your CRM database), or create a new contact record for them

25


Step 3: Manually assign the client a username and password, mirroring the login details they use to access the Admin Console of their individual site

Step 4: Select “Manage Customer Subscriptions”, then Click “Edit”

26


Step 5: Subscribe them to the “Client Portal” Secure Zone then make sure to Save & Finish

unbranded partner-site-customization-guide

Technology

partner portal

bc partner

brand new partner site

site showcases

actual site

site tourfirst

technical support requestfrom

home page