Hello Content Glass community.

 

This is the first newsletter in a series of short "How To" newsletter guides. There are multiple options of using and interacting with Content Glass installed on your website, and I hope this series of newsletter will encourage you to try new things.

Creating Widgets With External Button

After installing Content Glass on your website you see small blue tab that you can control from managed-app preferences. Accordingly you might think that Content-Glass is a button for website but in fact Content Glass is an API and platform for creating strata of contextual information on your websites. The API support a creation of CG apps and CG Add-on apps running on top of your websites.

The tab/button that you see after installing CG managed-app  is CG-Button -  which is CG application running on top of CG Client API for websites. In future newsletter I will explain how can you hide this button or adjust its settings, but for now the most important to understand is that CG is an API and platform. Now, since we have this API installed on our website we can call finctions of this API and operate some basic functionality directly for our website's HTML.

Today I will show an example of using the API directly from HTML of your website by setting special 'cg' attribute on common HTML tags. The purpose of this feature is to allow website owners to add their own buttons for users or admin to create CG-Widgets (or open settings) without having to use the widgets-selector view provided by CG button app.

Here is an example of HTML script of  button that create TextBox widget.


<button cg='{"type":"button", "label":"Content Glass", "action":"create-widget", "lib":"rhz-basic", "widget_type":"cg-TextBox", "widget_options": {}}' title="Create text-box widget">Create TextBox</button>

The important part of this HTML script is the 'cg' attribute set on the button Element. When CG API is loaded it searches for elements having this tag. It is then register a click-event o found elements. When element is clicked, an event is triggered and this operate some defined action. In this case action is 'create-widget'. The other settings on 'cg' attribute value tell CG API what widget is to be created and from which library it should be loaded.It means that if you have your own custom widgets library, you can trigger widgets to be created directly from website's HTML. 

The next example is quite similar but instead of using button element we use 'div' together with 'fontawasom' icon and some basic style. This time we create Video-Box widget. The CSS that we use here to style the button is only an example. You can use your own style, or not using a style at all.


<style>
    .cg-operation-button {
        display: inline-block;
        cursor: pointer;
        padding:5px;
        text-align: center;
        vertical-align: middle;
        background-repeat: no-repeat;
        color: black;       
    }

    .cg-operation-button:hover {
        background-color: ghostwhite;
        border-radius: 5px;
    }
</style>

<div cg='{"type":"button", "label":"Content Glass", "action":"create-widget", "lib":"rhz-basic", "widget_type":"cg-VideoBox", "widget_options": {}}'
     class="cg-operation-button" title="Create video-box widget">
    <i class="fa fa-file-movie-o fa-3x" aria-hidden="true"></i>
</div>

In some situations it may be useful to ask your customers to register as users on CG system, for example when you are using custom made CG add-on that requires users to login in order for generated widgets to be associate with some user account. Here is an example of using 'cg' attriubte to trigger the login dialog of CG-Button app, directly from your website's HTML:


<a cg='{"type":"button", "label":"Content Glass", "action":"login-cg-account"}' href="#">Login/Register with CG Account</a>

The list below shows various values you can set fo 'cg' attribute for some common widgets from basic widgets-library.

<u>cg-SimpleNote:</u>
{"type":"button", "label":"Content Glass", "action":"create-widget", "lib":"rhz-basic", "widget_type":"cg-SimpleNote", "widget_options": {}}

<u>cg-TextBox:</u>
{"type":"button", "label":"Content Glass", "action":"create-widget", "lib":"rhz-basic", "widget_type":"cg-TextBox", "widget_options": {}}

<u>cg-PictureBox:</u>
{"type":"button", "label":"Content Glass", "action":"create-widget", "lib":"rhz-basic", "widget_type":"cg-PictureBox", "widget_options": {}}

<u>cg-VideoBox:</u>
{"type":"button", "label":"Content Glass", "action":"create-widget", "lib":"rhz-basic", "widget_type":"cg-VideoBox", "widget_options": {}}

<u>cg-TextChatBox:</u>
{"type":"button", "label":"Content Glass", "action":"create-widget", "lib":"rhz-basic", "widget_type":"cg-TextChatBox", "widget_options": {}}

 

That it for now! 

If you need my help for operating Content-Glass or using it for creating custom app or custom add-on for your website don't hesitate to email me or open a ticket.

 

Short notification:

Next month (4/17) I am lunching a beta version of CG-Direct service. CG-Direct is a new Content Glass app for creating interactive landing-pages for engaging with customers and contacts. The service let end-users and business owners to create pages that use Content Glass platform for engaging with customers and friends. One of these pages is "Direct-Selling" . The direct-selling page is an interactive page that let store-owner run live selling sessions with customers chat, video and integration with web-store collection. Sessions (which are cg-widgets) may persist and be used multiple times, so that for example, customer can return to an existing session and complete the purchase also when store owner is off-line. The items added to cart on the direct-selling page are automatically sync with real store shopping cart when user click a button to 'complete-purchase'. The page is currently support Shopify and Etsy. I am looking for participants that would like to try and use the "direct-selling" page during beta period.  Website owners that are interesting in using the app as beta testers are welcome to contact by email and will be notified in advance when beta is launched.

 

Best regards,

Gilad.