Gigya Add-ons Viewer and Editor
Using the Add-ons Viewer and Editor, you can change some of the most common parameters on live implementations of Gigya Add-ons. You can then observe how these changes behave in real-time as well as view the actual working code syntax driving them. To start, simply visit our demo Site and open the Mod control panel by clicking on the Click here to view or edit Gigya Add-ons button.
- The Add-on Editor and Viewer is only available on desktop and tablet versions of the demo Site.
- Certain items have a Help Tool-tip designated by a ?. Mouse-over the available tool-tips for additional information regarding the specific feature or parameter.
- The demo site Add-on Editor and Viewer does not currently support API keys (sites) created on the Russian data center.
Hovering over this will open the main menu showing which add-ons are active on the page you are viewing.
As you move your mouse through the menu, the corresponding widget will be highlighted on the page (image above). Note that you may have to scroll down to reach widgets that are out of view.
If the button is grayed out, that particular add-on is not available on the page you are currently viewing, to view the code for that add-on you will need to navigate to another page of the demo site.
To see the current parameters of any of the available add-ons, click on it's name in the menu and the applicable Modification window will activate.
The Modification window will also highlight the widget you are currently observing while your mouse is over it.
You can drag the Mod window around the screen, as well as minimize it (which will un-dim and enable the background), allowing you to more easily see the results of any changes you have made.
Some modifications that you make will require you to initialize the method, Screen-Sets for instance. Most of the Mods, however, will make all changes in real-time and these changes are visible immediately after you edit any of their settings.
If at any time you want to copy the code from the Mod window for use in your own site, clicking within the code window will automatically select the entire code block.
The following are the currently implemented Add-ons and their supported associated modifications . The supported modifications listed here are only a small subsection of possible parameters for any of the various methods. For a full list of the parameters available, see the Additional Information section of the associated Add-on.
Edit Site Api Key
Use the Edit Site Api Key mod to change the active API Key of the demo site to your own. You can use this if you already have a Gigya account and would like to observe how some of the add-ons may appear on your site.
Certain add-ons will not function correctly when using this Mod. For instance, if you do not have Comments or Loyalty activated for your API Key, those add-ons may appear to be empty, missing information, or broken.
It is also important to note that working Add-ons may not appear on demo exactly as they will on your site due to differences in site specific CSS.
Changing the API Key will disable the default login option for the demo site. To load a screen-set for an API Key other than the demo API Key you will need to use the Screen-Sets Mod window accessible from the menu.
To login to the demo site, just revert to the demo API Key and the site's login will function again.
You will see the Currently Active API Key displayed in the Current API Key entered is: field at the top of the Mod window.
To change the API Key of the demo site, enter your active API Key into the field and press the Change Active API Key button.
To change back to the demo API Key at any time, re-open this Mod and check the Revert to the demo default API Key checkbox and press the Change Active API Key button.
This Mod is specifically designed to work in conjunction with the Screen-Sets Mod below.
Use the Screen-Sets mod window to see how you can change the look of the screens or to see how they may look across different devices.
This Mod is currently limited in it's use, however, can still show you the basics of how to get started with, and implement, Gigya's Registration-as-a-Service engine on your site.
The Collection ID section contains three options that you must choose from for this Mod to function correctly.
- demo - Leave this option selected if you have not changed the site's API Key via the Edit Site API Key Mod above. With this option selected the Mod will use the current screen-sets for the demo site.
- Default - If you have changed the site's API Key via the Edit Site API Key Mod you must select either this option or the one below.
Selecting Default will enable the Mod to load the Default screen-sets associated with your API Key.
Custom - If you have changed the site's API Key via the Edit Site API Key Mod you must select either this option or the one above.
Selecting Custom will enable you to then enter a specific Screen-Set Prefix in the associated field. This prefix should correspond to an active screen-set collection attached to your API Key. You must only use this option in the event you have deleted or broken the Default screen-sets associated with your API Key; if you still have an active default screen-set collection in your account this is optional.
If RaaS was activated on your account prior to October 26th, 2015 your Default Screen-Set collection is using older technology and you may want to create a new collection and use the Custom option so that you can experience screen-sets that include the Responsive Design Technology that Gigya released on that date.
The screenSet parameter allows you to choose which screen-set you want to load when you run the Mod. You can choose from either:
The dialogStyle parameter allows you to see how the screen-set will look using either the new Modern style (blue header) or the pre-October 26th, 2015 screen-sets which use the original grey header and borders. Your available options for this parameter are:
The deviceType parameter will allow you to see how the screen-set appears on touch devices versus desktop. The modification options available for this parameter are:
The lang parameter allows you to set the language that errors are returned in. The modification options available for this parameter are:
- en - English
es - Spanish
English is the default and you do not need to specify this parameter if you do not need the errors returned in a language other that English.
It is also important to note here that this parameter does not affect the screen-set language itself. To use a screen-set in a language other than English, you must first create a new screen-set collection in the Gigya Console and adapt it to the required language.
For all supported languages available for the lang parameter, please see Advanced Customizations and Localization.
Finally, to view the screen-set after you have made your changes, press the Initiate Custom ScreenSet button.
If the active API Key on the demo site does not contain a screen-set with the name you specified in the Collection ID section, or if the API Key currently active on the site is invalid or incorrect, this Mod will not function. If nothing happens after you press the Initiate Custom ScreenSet button, please check both the API Key and the Screen-Set name. If necessary you can revert the API Key to the demo default key via the Edit Site API Key Mod and try again.
The Loyalty add-on implements Gamification on the site. Most of the settable parameters pertain to a combination of specific Challenges and Levels as they are set up in your Gigya Console and placeholders that are used internally by the Loyalty Gamification engine. Changing these would break the functionality of the add-on.
If you have Challenges set up for your API Key and you would like to see how they appear on the demo site, simply use the Edit Site API Key mod from the menu and change the API Key to your own and the placeholders will do the rest. Note that after creating a Challenge in your Gigya Console, you must create actions and levels in order to activate it.
The Signals demo allows you to view how the Demo site is using Signals to track behavioral data across the site. Any currently logged in user can view their Signals data from this dashboard.
To use the Signals demo, you should first visit the Demo site and visit some of the pages or perform any other actions you would like, e.g., sharing and/or commenting (we started tracking behavioral data on September 27th, 2016 at 8am est., so you might not have any data associated with the new counters yet). Note that we are only tracking views of the 3 Recipe pages, not the Home or About page.
Depending upon how many times you have previously logged into the Demo site since the counters were installed, you may also see a popup congratulating you on your login (this popup currently initiates every 10th login for the user), as an example of a custom counter a client can implement to track the number of logins per user.
The right-side panel displays the actual JSON object being returned from Gigya (this is only the counters object of the response, not the entire response).
To experience how a Custom Counter might work, you can then press the second button labeled Increment. Everytime this button is pressed, the Custom Counter (attached to the class testcountersclass) will be incrememented. To then view the change in the data returned from Gigya, press the Get My Stats button again to re-pull the user data from Gigya's servers.
Finally, you can view actual code snippets of the code being used on the Demo site to perform the various actions.
Ratings & Reviews
The Ratings & Reviews mod allows you to modify the Ratings feed by adding or removing links and buttons.
The showCommentButton parameter allows you to add or remove the Write your review button from the top of the feed. This button, when pressed, sends the user to the Commenting section (useful for longer feeds).
The showReadReviewsLink parameter allows you to add or remove the link by the Ratings, which states the number of current reviews and allows the user to read them.
The hideShareButtons parameter allows you hide or show the Share link that will appear underneath each review.
The showLoginBar parameter allows you to show or hide the Login bar that appears at the bottom of the feed where the user comments.
The Reactions mod allows you change the look and layout of the Reactions Bar add-on.
The showCounts parameter tells the add-on whether to show the amount of times the corresponding action has occurred, and if so, where to place the count in relation to it's button.
The layout parameter allows you to change the orientation of the bar, either horizontally or vertically.
The noButtonBorders parameter allows you to show the individual items as buttons or plain text.
The Share Bar mod allows you to modify the Share Bar and it's functionality.
Use the showCounts parameter to turn on the display of previous shares, and the position of the count in relation to the provider.
Only a limited number of providers support counts, including Facebook and LinkedIn.
Use the iconsOnly parameter to show either the providers logo icon alone, or with the providers name also.
The layout parameter determines the add-on's orientation, either horizontally or vertically.
Use the noButtonBorders parameter to show a border around the providers name. This parameter has no affect unless iconsOnly is set to false.
The operationMode parameter tells the add-on whether to use Simple or Advanced share when the user clicks on the Share More icon.
The Share Button Type is a mod setting and not an add-on parameter. This setting tells the Edit Plugin whether to set the shareButtons parameter using an array of defined button objects, or a string of providers. If using an array of objects, you can fully customize the style of the share experience, whereas using a string uses Gigya's default internal images for each of the listed providers. If you set this to String, all supported providers will be shown, however, which providers you choose to show on your site will depend upon which you list as the value of the shareButtons parameter.
The checkboxes beneath the Share Button Type setting are used by the Edit Plugin to add or remove objects from the shareButtons array, if you set the Share Button Type to Objects. You may create objects for any social network that supports sharing and that you have the required permissions.
For a complete list of supported providers see the Social Network Capabilities Table.
The Comments mod allows you to see how comments may appear on a mobile device as well as whether to display the Login Bar or not.
Changing the deviceType parameter will allow you to see how the Comments Add-on appears across different devices.
Use the showLoginBar parameter to show or hide a Login button at the top of the Comments feed.