Overview

With Direct-Selling page for Etsy you can arrange on-line sessions with customers for selling products from your Etsy listing. The Direct-Selling page is a collection of multiple views that focus on engagement with buyers. It is not a website but a landing-page. It is focus on engagement with customers and not on presenting content. It does not replace your portal on Etsy but come in addition to. It does not manage any aspect of orders, billing and fulfillment. The payments and order procedures occur on Etsy. It is simply a tool for web store owners to interact with customer directly, and to maintain private sessions where customers can later return and complete a purchase.

When user arrive to Direct-Selling page the default view user see is  "Welcome Page". Users can then start a session or visit other views also without session. For example users can visit "Gallery" view of products and select products also without session. Users can also visit the "Sharing Board" view and leave some widget to share with you. When user start a session a special hidden Content-Glass widget is created that keep session's data for as long as the session is not deleted. It means that session persist and does not disappear if user leave the page. Users can return later and get into session, with you or alone.

When users start session with you, you get notification and a sound (door-bell ring). If you are available you accept the session and this put you and the remote user in a live-session. By default, live-session starts with "Counter View". The idea of live-session is to simulate a situation that resemble the interaction between seller and buyer in real store. During live session you present to user the products of your store 'over the counter'. This involve textual chat and optionally video chat. In the 'Counter View' you select items to show to user, and the user see these items. When you change the item and show other item, this is also change on the user side. This way, you can explain to buyer about items of your store and help buyer to choose product from the listing of your store. The buyer can add items to cart, and the shopping-cart will be carry by internal session-widget, so in case user did not completed the purchase on first session he or she can complete the purchase later. To complete the purchase user go to 'Shopping Cart'  view and click 'Complete Purchase' button. This action redirect the user to Etsy website where cart on Etsy is automatically filled with selected items. See more details below. 

 The procedure for using Direct-Selling page is very easy as will be covered by this article:

1. Create Direct-Selling page.

2. Connect with the store. 

3. Loading store data.

4. You are basically ready!

5. You may also consider some optional additions. 

Important note: CG-Direct app is free during the beta testing period. During this period you can create pages for free. If you see a button "Pay Now" on your page, it is there for the purpose of testing payment flow. 

Create Direct Selling Page

'Direct Selling' is a page type on CG-Direct app that provide web store owners (and/or their affiliates) a functionality of arranging live-sessions for selling their products online. Ream more information about direct selling page.

Creating new page is very easy. You can do that by viting the Pages view or by clicking the 'Create Page For Shopify' button below.  When you create new page a form is presented with some basic fields you neew to set:

  • Title: this is the title that will be used by pages report and global pages index, to show your your page. Keep it simple and relevant.
  • Short description: will be used for pages index. Present your store page in few words.
  • Full Description: This is the description users will see when visiting the welcome page of your page.
  • URL Path: this is an important field that determine the path for your page. Use not too long term that reflect the name of your store. Do not use spaces. Use hyphens instead.  
  • Page Domain: this field allows you to mask the URL of your page with your own url. (not yet supported)
  • Owner Name: wrtie your real name so that in a live session visitors will be able to see your name.
  • Website: A link to your website. The URL is used on welcome page to create link to your website. 
  • Social Accounts: Can by used to specify links that refer t your social accounts. 
  • Layout: currenlty Direct-Selling page has one single layout so no need to change.
  • Code: This field is for advanced users that knows how to set CSS rules. The code you set here is autoamtically append to the bottom of the HTML that create your page, and it is used for fine-tuning and general customization of default style.
  • Store Platform: Select Shopify 
  • Store Domain: set the Shopify domain of your web store  (not the alias domain) - example  mystore.myshopify.com
  • Store Permissions: there is currently no need to set any value in this field. Keep it empty.
  • Store mode: for now keep it on Open. In the future this field will be used to control the store presence and activity when you are not available but this is not yet supported.

After saving the form, and given that all required fields are set and path is not used by someone else, a new page is created and open. The first view you see is "Owner Dashboard" that you will use to perform some management tasks and also to listen to new sessions. Follow to next step of connecting with the store. 

 

CREATE DIRECT-SELLING PAGE

 

Connect with store 

When Direct-Selling page is first created, it does not yet connected with actual web-store, so no products can be presented and products gallery is empty. In order for page to show some products you should first connect with your store. This is the step in which you will authenticate the Direct-Selling app with your Etsy account. On the "Owner Dashboard" view of your page you see a button say "Connect to store". 

  • Click the 'Connect to store' button. 
  • Authentication dialog of Etsy appears.
  • Approve the app to continue.

In the background, an access_token to access data from your web-store is assigned to the page, and will be used from no on to read products and collections from the store. After few seconds the control is returned back to "Owner Dashboard" page. Follow to next step of loading data.

* Note - the current version check that authenticating user is the same as the owner of the store, and this prevent from other users to create page on behalf of your store. Future versions will also support team members so you will be able to allow affiliate team members to create page related with your Etsy store. 

Loading store data

The page is now connected with your store, so that it is possible for page to read products info from your store. However nothing was loaded yet so products gallery is still empty. 

  • Click the 'Load store data' button. You will see progress-bar on the bottom of the page.
  • Wait few seconds for data to load. 
  • When done, refresh the page.

The page is now loaded. Store listing loaded to cache of page (located on the server) is set with some general information about your store, information about sections you defined (section is referred as collection) and some initial products data. Since a store may include many products, we read only the first page and later if it is required to bring more products we do it on the fly. Note that information is stored in cache, to reduce API calls to Etsy, and to shorten response time of user requests. Accordingly if you add new items to store listing, it is possible these products will not be immediately available on your page. You can always reload the data by clicking 'Reload store data' button.

 

Ready for sessions

Your page is now ready to serve visitors. It means few things:

  • Visitors are able to initiate a session with you. 
  • Visitors are able to return into sessions as long as session was not deleted.
  • Visitors are able to visit the gallery of products either within a session or outside of session.
  • Visitors are able to add items into shopping-cart and to perform an actual checkout on Etsy web-store.
  • Visitors are able to share widgets with regarding various requests, questions or feedback, either publicly or in the scope of private session.

You can read more details about receiving and managing session in the direct selling page article.

 

What Next

  • Let other people know about your page:  Your page is ready, but no one knows about it yet. In order for users to visit your page, and not only by finding you in the pages index, it is required to announce your page. You can do it on your actual store, or you can post messages on social-accounts you are using such as Google+, Facebook, Twitter etc'.  
  • Embed the page in your website with IFRAME. If you want the page to be appear  as part of your Shopify store, you can embed an IFRAME in your web-store with reference to page. This is explained in direct selling page article. 
  • Extend your page with premium options. See more details below.

 

How Purchase is Completed

After some items were added to shopping cart, user can complete thew purchase by going to 'Shopping Cart'  view. In the case of 'Etsy' platform, user may also register to 'Content Glass Cloud' so that we can associate the user with sharable Shopping-Cart, a special Content-Glass widget that allow shopping-cart to roam between application. The registration is extremely simple. There is no profile to fill, simply register with user/password and then login. Once user is registered, user can visit the 'Shopping Cart' view and click 'Complete Purchase' button. Note that for Etsy shop, registration of users to Content Glass Cloud is optional and will be beneficial for future Content Glass apps where sharabe Shopping-Cart will be used to increase user engagenet with your Etsy portal.

Clicking 'Complete purchase' will redirect the user to your Etsy portal. A dialog will be presented to user, asking the user to authenticate using Etsy account of end-user. When authentication done, the items from shopping-cart created on your Direct-Selling' page, will be filled into the shopping-cart of Etsy. The end-user can now complete the purchase procedure on Etsy.

 

Sharable Shopping Cart

Direct-Selling page use special Content-Glass widget: Sharable Shopping-Cart. This widget act in the background and user does not have direct interface with it. The widget is created for registered-users and allow shopping-cart items to roam between applications. In the case of Etsy the sharable shopping-cart is not required as part of purchase procedure, but will be used by future apps to allow roaming of shopping-cart between multiple web contexts. Since Etsy is a close platform and does not allow Content Glass API to run as inherit part of the web-store (as for example in the case of Shopify), the sharable shopping-cart will be available using Content Glass browser extension. More details will be provided in the future.

 

Premium Optional

Direct-Selling page can be extended with optional premium level features. These features will be added during beta period. The features presented below are optional, and are not require for basic operation of Direct-Selling page.

  • Facebook page - get Facebook page for presenting a tab with your direct-selling page as part of your business page on Facebook.
  • Alias domain - use alias domain for your page.
  • Bookmarklet - provide bookmark button for your customers to start the direct-selling page based on context of presented web-page (for example when visiting yout Etsy portal clicking the button open the page for your store)
  • Page API - Create pages with API. A solution for integration with CG-Direct.