Online Business Success

How To: Implement A WYSIWYG Editor for Customer Submitted Web App Items

WebFolio Developer

Using our customer submitted Web App feature is a great way to build database driven, interactive websites. If you want visitors to be able to format their text before it's submitted however, you'll require something more powerful than the default HTML text area.

In this article, we'll show you in just 4 easy steps how to implement a fully-featured WYSIWYG editor that submits text as formatted HTML instead!

Step 1. Set up your Web App

Firstly, you need to make sure your Web App allows customers to create new Web App items.

Go Admin > Build Web Apps and select your Web App

Enable Customer Submitted Web App items

To enable this feature, tick the "Add New Items" checkbox under "Can Customers Create Web Apps?". If you'd also like customers to be able to edit and delete their existing Web App items, tick the appropriate checkboxes.Read more about customer submitted Web App items at the Online Business Wiki.

For this example, we've kept our Web App basic by collecting only the standard Name / Description system fields.

Step 2. Upload the jHtmlArea files to your site

A WYSIWYG editor that plays nice with BC is jHtmlArea. You can download it here.

Once you've downloaded the file, extract its contents and locate the following files:

  • jHtmlArea.css
  • jHtmlArea.png
  • jHtmlArea-0.7.0.min.js
  • jquery-1.3.2.min.js
Upload the files

Upload these files to your site using either FTP or our built-in File Manager. For this example, we'll upload all 4 files to the root directory of our site.

Step 3. Place the submission form on a page

Now we need to create a page to place the customer submission form on. We'll go Websites > Web Pages and click "Create A New Page"

Give the page a name and URL. For this example, we'll call it "Submit", with a friendly URL of /submit.

Using the Module Manager, select Web Apps then "Web Apps Input Form for Customers".

Module Manageer

Choose your Web App from the drop down menu then insert it on the page.

Insert

The form will be inserted in HTML format for easy editing.

Step 4. Insert the script

Switch over to HTML view and insert the following code at the top of the page.

Script

Click here for a version you can quickly Copy and Paste.

If you uploaded the files to a directory other than the root, make sure you change the code to reference their correct paths.

Save and Publish the page.

Save and Publish

Check the results

Switching over to the live page, our description field's text area has been converted to a friendly WYSIWYG editor and even includes a handy HTML view.

WYSIWYG Editor

Once the customer enters their text, formats it using the editor and hits the submit button, it will be submitted as formatted HTML.

How To: Sync Your Online Business with Facebook using RSS

Oliver Giam

Using our RSS Channel feature, you're able to syndicate the majority of content from your Online Business via RSS feed. You can syndicate blog posts, web pages, literature items, announcements, FAQs, Web App items, bookings and new products you've added to your online store.

In this article, we'll show you in just 3 easy steps how to sync your Online Business with Facebook using RSS feeds, helping you better promote your business and keep loyal customers in the loop.

Step 1. Set up your RSS Channels

Before getting started, you need make sure you've created an RSS Channel and added items to it.

Creating a new channel is easy - simply click Website > RSS Channels, then select "Create a new RSS Channel" from the Action Box to the right.

If you're syndicating a blog, make sure the "Syndicate this blog" checkbox is ticked under the Website > Blogs, then the individual blog you'd like to stream via RSS.

Once ticked, the Blog will automatically have it's own RSS Channel created and appear in the list under Website > RSS Channels.

Step 2. Locate your RSS feed URL

Once your feed is set up, you'll need its unique URL in order to add it to Facebook. To locate the URL, click through to the individual feed...

...and select "Preview in new browser" from the Action Box to the right.

Your feed will open up in a new browser tab or window and you should be able to see your unstyled items displayed. Go to the address bar, highlight the feed URL and Copy (CTRL+C) it to the clipboard - we'll need this later.

You can also use this URL with a variety of third-party feed readers such as Google Reader or Feed Burner, to keep track of what's being added to your feed.

Step 3. Import the feed to Facebook

The next step is to import the feed into Facebook, so it adds your new RSS items as "Notes". Once you're logged in to Facebook, click the "Account" drop down menu from the upper-right of the interface and select "Application Settings".

Scroll down the list of applications until you find the "Notes" app. This application should already be present in every Facebook account. Click "Notes".

To the right of the page, you'll see a "Notes Settings" box. If you're not currently importing any blogs, then it will give you the option to. Select "Import a blog".

You'll be taken through to the "Import an external blog" tool. While this option is primarily used to import blogs, it will accept any standard RSS feed.

In the "Web URL" input field, Paste (CTRL+V) in the feed URL you copied earlier, then click "Start Importing".

You'll be taken to a confirmation screen with a preview of the items in your feed it will import initially. Click "Confirm Import" to finish the process.

Check the results

Your existing RSS items should be automatically imported as notes and appear on your wall as updates.

Every time you add a new blog post, announcement, online store product, or update the content you have syndicated as part of your RSS feed, Facebook will automatically post the new item as a note on your wall for others to view, like, or comment on.

Streamline Your Business Using Workflows

Oliver Giam

Using Workflows to Streamline Your Business and Keep Your Customers Informed

Workflows are representations of your real-life business processes within your Online Business. As an example, you might have a simple 3 step online sales process as outlined below:

Did you know you can build a workflow inside your Online Business to automatically send notifications to the various people required to remind them to complete their step of the sales process. Not only do you email them but you can send an SMS as well. Your accounts department is notified to confirm the order, then your warehouse can build the order and finally, your shipping department receives a note to dispatch the order to your customer! Tick the 'Must Approve' box so each workflow step must be marked as completed by the person responsible before it progresses.

Must Approve

Workflows can be initiated automatically for webform submissions, order submissions, bookings and web page edits.

How Do You Use Workflows?

Workflows are located in your 'Admin' menu where you can click on 'Manage Workflows'. Here you'll be able to create workflows to model your business processes such as your Order-to-Dispatch process described above. For each step you'll need to specify how much time is allowed before escalation, who is responsible for the workflow, and who the workflow is escalated to if there is a problem. There is a detailed guide to setting up Workflows on our Online Business Wiki.

Send the Workflow Notification To 3rd Party Email Addresses

Notifications are by default sent to the Online Business users assigned to the workflow step but by ticking the 'Also Send Workflow Notification To' box you can send the notifications to 3rd party email addresses. This is useful if you have people in your organization who don't have Online Business logins but need to be informed that they have tasks to complete.

Dispatcher Notification

Keep Your Customers Informed As Workflow Steps Are Being Completed

As well as notifying your own employees you can tick the 'Send Workflow Message to Customer' box to send emails to the customer as their orders pass through the different steps of being fulfilled. For each different step you'll need to enter different custom content e.g when the goods are shipped and a 'Thank You' note is sent.

Workflow to Customer

As your employees complete each step of the workflow they can click on 'Quick Add' and then 'Approve Task' to send an automated notification to the customer that their order has progressed through the business process!

Order Workflow Customer Add and Task Approval

Customize the Automatic Notification Email

Don't forget you can customize the look and feel of the notification emails going to your customers by going to the 'Customize System Emails' option in the admin menu and clicking on '3rd Party Workflow Emails'. This is where you can create your own HTML email template complete with your own logo and branding.

Customize Customer Email Option

Use Workflows To Make Sure The Right People in your Organization Are Being Notified

Keeping your workers and customers informed at every step of your business processes means you'll be providing more timely and transparent customer service. Using Workflows, your business will be better organized and your customers will be more satisfied that they know the status of their order or inquiry all the way

4 Easy Steps to Embed A Twitter Widget on Online Business Buddy

Oliver Giam

In this tutorial, we'll generate and insert a simple Twitter profile widget in the site-wide template of our site in just 4 easy steps!

Contents

[hide]

4 Steps To Embed a Twitter Widget

Step 1. Generate the code

Go to: http://twitter.com/goodies/widget_profile, enter your Twitter username and click "Test Settings" to see a live preview of the default widget.

Image:1username.png

From this page, you can also customize the behaviour of the widget, it's appearance (the background and font colors), and it's size. If you know where you're going to insert the widget, customize the colors so it matches the look and feel it's surroundings.

Image:2appearance.png

For this example, we'll customize the color scheme to match that of our site-wide template, where we'll be inserting the widget.

Step 2. Grab The Code

Once you're finished customizing, click "Finish & Grab Code" to see the code that renders the widget on your HTML page.

Image:3grabcode.png

Highlight the code then "Copy" it to your clipboard (CTRL-C)

Image:4copycode.png

Step 3. Paste The Code In Your Template

You can place the widget on any page, but for this example we'll place it in the sidebar of our Site Wide Template, so that our status updates are displayed on every page of the site.

Under Admin > Manage Site Wide Templates, select the appropriate template and switch to HTML view.

Image:5pastecode.png

Paste (CTRL-V) the copied code where you'd like the widget to be rendered.

In this example, we'll place it inside our sidebar div container so that we can control it's position using CSS.

Step 4. Save & Publish!

Save & Publish the template, then visit the front-end of your site to view the changes.

Image:6saveandpublish.png

With some knowledge of CSS, you can quickly customize the look and feel of your Twitter widget. You can also edit the variables inside the code at any point in the future, without having to re-generate the widget.

What Visitors Will See

On the front-end of your site, a profile widget will be dynamically generated and display your most recent Tweets.

Image:Twitterfrontend.png

This is a great way to spice up your static pages and keep visitors up-to-date with the latest news surrounding your business.

4 Points To Improve Your Email Marketing

Oliver Giam


4 Points To Improve Your Email Marketing

On the subject of email, one of the most powerful features within the BC system is Email Marketing. Used properly, it's a cost-effective push marketing channel that small businesses like yours can use to reach past customers and prospects who've opted-in to receive communications from you. You can read and learn all about email marketing at our Online Business Wiki buthere's 4 points I want to highlight to help you become a better email marketer -

1) Keep Your Mailing Lists Clean

Unsubscribe AllAs an unfortunate part of life on the internet, you will get people and automated spambots signing up for your email newsletters with fake or temporary email addresses. It's important to remove these from your email recipient lists on a regular basis. Repeatedly sending emails to invalid or expired addresses will result in ISPs flagging your legitimate email marketing efforts as spam.

Thankfully, it's now easier than ever to keep your mailing lists clean with BC:

  • Once you've sent out an email campaign you can automatically remove all bounced emails from your mailing list with one click just by going to the 'Email Addresses That Bounced' option in 'Reports and Performance' for your campaign and clicking Unsubscribe Allunder the Actions tab.
  • Email Newsletter sign-in boxes now come standard with a CAPTCHA field when you use the Module Manager to place them on webpages or templates to stop automated spambots from signing up with fake email addresses.

2) Let Your Recipients Use Their Browser Instead

Apple Mail IconWhen you send out your email campaigns, you're reaching a vast ecosystem of email clients out there; various versions of Outlook, Apple Mail and Thunderbird floating around and webmail clients like Gmail and Yahoo Mail too! Although it's good practice to test on all the major clients to see how the images and layout of your HTML email are rendered there's what I call the 'just-in-case hyperlink' that you should put in the header of your emails.

It's the 'View-in-browser' link and all you have to do is insert { tag_viewinbrowser } in your email header or footer. When your recipients click on it, the email will be opened in a browser where you can be sure the images will download and the layout will be rendered as you intended therefore increasing your readability.

3) Let Your Recipients Tell Their Friends About You

Want a quick-win for expanding your email newsletter readership especially if you're sending some exclusive high-value content on a regular basis? Put the{ tag_tellafriend } tag in your header or footer and the recipients who love your newsletter can click and sign-up their friends to read your newsletter as well.

4) Let Your Recipients Unsubscribe

Inevitably, people will want to unsubscribe from your email lists for whatever reason and it's important to provide them with this option otherwise they might just click on the 'Report Spam' button instead which will red-flag you with their ISP. Did you know you have 2 different kinds of unsubscribe options you can give them by inserting these respective tags:

  1. { tag_unsubscribe } - the standard unsubscribe link which opts the recipient out of all communcations from you.
  2. { tag_unsubscribelist } - sometimes people might want to unsubscribe from an monthly or fortnightly email series rather than all communications from you in which case you would useUnsubscribe. When they click on this they are only removed from the email list that was used to send them the email campaign but are still opted-in to receive other communications from you.

You Can Become a Email Marketing Power User

With those 4 tips, I hope you've gained some knowledge to fine-tune your email campaigns. Not quite at the power user level yet? That's ok - try these email campaign tutorials on our Online Business Wiki and give Email Marketing a test-drive on your BC Free Trial!