SAP Customer Data Cloud Positions

Advanced Customizations and Localization

Skip to end of metadata
Go to start of metadata


This chapter explains the following subjects:


Language Support

The Gigya platform supports localization. Gigya's default language is English. You may change the language to one of the supported languages by assigning a string language code to the lang field of the global configuration object.

For Example:

<script type="text/javascript" src="">
  lang: "da"  // This will change Gigya's language to Danish

However, for best results and to avoid having to reload assets, when possible, you should add the lang param directly to the actual request to the gigya.js file, like so:

<script type="text/javascript" src="<your-api-key>&lang=da">

LanguageLanguage Code
English (default)en
Chinese (Mandarin)zh-cn
Chinese (Hong Kong)zh-hk
Chinese (Taiwan)zh-tw
Dutch Informalnl-inf
French Informalfr-inf
German Informalde-inf
Hindi (*SMS TFA Only)hi
Indonesian (Bahasa)id
Kannada (*SMS TFA Only)kn
Marathi (*SMS TFA Only)mr
Persian (Farsi)fa
Portuguese (Brazil)pt-br
Serbian (Cyrillic)sr
Spanish Informales-inf
Spanish (Lat-Am)es-mx

Gigya currently supports   locales out of the box.

Note: To learn how to define and use the global configuration object, please refer to Gigya Basics section.


Localization Support for Third-Party Plugins

Most of Gigya's plugins support localization based on the lang parameter in the global configuration object, as described in the previous section. However, for some third-party plugins, such as Facebook's Like button, you have to set the parameter before the plugin is loaded. In such cases, the language needs to be set in the socialize JS URL, which is loaded before the plugin's parameters are initiated.

To support localization for third-party plugins, including Facebook's Like button, add a new query parameter to the socialize JS URL with "lang=" and the code of the desired language. The format of the "lang" query parameter is a 2-letter language code with a 2-letter country code, separated by a hyphen.

Recommended Best Practice example:

<script type="text/javascript" 

Recommended Best Practice for implementing the lang parameter is to append it to the string that loads the gigya.js SDK (as in the above example), rather than including it within the global Conf object.

In this example the language is set to Japanese, with the 2-letter language code 'ja' representing Japanese, and the 2-letter country code 'jp' representing Japan.

The 2-letter language codes are defined in ISO 639-1, and the 2-letter country codes are defined in ISO 3166-1

Note: The lang parameter in the global configuration object will override the lang parameter passed in the query string.


Managing Screen-Set Locales

For instructions on how to manage and edit the locales available to your site's screen-sets, see UI Builder Localization.


Loading Gigya's Script Dynamically

The Gigya service allows loading its JS script dynamically using document.write, or DOM manipulation.

This can be useful in case your web-page uses Gigya only in some circumstances, and it might be more efficient to load gigya.js only if needed.


Step 1 - Load Gigya's Script

Method A - Using document.write:

document.write('<SCR'+'IPT type="text/javascript" src=""></SCR'+'IPT>');

The document.write method can be activated only while loading the page. The implication of choosing method A is that you must decide while loading the page whether to load gigya.js or not. This decision can be done on the server side.


Method B - DOM Manipulation:

    function loadGigya() {
        var s = document.createElement('script');
        s.src = "";
        s.text = '{siteName: ""}'

Using this method, you can load gigya.js when the page is already displayed.

Note: Replace "PUT-YOUR-APIKEY-HERE" in the code, to your Gigya API-Key, which can be obtained on the Site Setup page on Gigya website.


Step 2 - Receive Notification when Gigya's Script has Finished Loading


onGigyaServiceReady is a variable that the Gigya WebSDK always checks for as soon as it completes loading. 

For Gigya methods to function properly, they can only be called after the Gigya WebSDK finishes loading completely. Attempting to call a method prior to this, will result in an error similar to the following:

Uncaught ReferenceError: gigya is not defined

To ensure that Gigya is always loaded prior to any method calls on your page, you can place all Gigya related functions inside a handler and then call that handler using the onGigyaServiceReady variable.

A code example follows:

function GigyaLoadFunctions() { 
        "callback":function(res) {
			if (res.errorCode === 0;) {
				window.userGigyaData = res;
var onGigyaServiceReady = function() {
<script type="text/javascript" src="" ></script>


Using the above example, after Gigya finishes loading, it will then call the onGigyaServiceReady function which will, in turn, call the GigyaLoadFunctions function.

Note: If you implement dynamic Gigya's script loading, you should omit the code that statically loads Gigya's script. That is to say, in all of our code examples, remove the following line of code:

<script type="text/javascript" src="" ></script>

Working Example

Loading Gigya's Script Dynamically Demo - Method B:

After Gigya finishes loading, the Connect UI should appear below...

The Example Code:

    <title>Gigya Socialize Example</title>
    <script type="text/javascript" >
    // Load Gigya dynamically - Method B 
    function loadGigyaB() 
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = "<Your-API-Key>";

    // This function will be called when the Gigya Socialize script has finished loading
    function onGigyaServiceReady(serviceName) {
        // Disable the "Load Gigya" button
        document.getElementById('loadBtn').disabled = true;

        // show connect UI in "divConnect"
        gigya.socialize.showConnectUI({ containerID: "divConnect", width: 150 });
    <h2>Loading Gigya's Script Dynamically Demo - Method B:</h2>
    <br />
    <input type="button" id="loadBtn" onclick="loadGigyaB()" value="Load Gigya"  />
    <br /><br /><br />
    After Gigya finishes loading, the Connect UI should appear bellow...<br /><br />
    <div id="divConnect"></div>


In order to make the above code work in your environment, please note:

  • The API key in the sample will only work on http://localhost/...
  • To load the page from your domain, modify the value of the "APIKey" field in the code to your own Gigya API Key. A Gigya API Key can be obtained from the Site Dashboard page on Gigya's website. Please make sure that the domain from which you are loading the page is the same domain name that you used for generating the API Key.
  • If you are using https, be sure to further adjust the JS API url to:<Your_API_Key>.

Passing Multiple Parameter Objects

Currently our API methods are called only with params , but we support calling our API methods with multiple arguments. The arguments passed to the method are merged into a single params object. If a property is defined in several objects, the latest argument property will override the previous one. 

In the following example five parameter objects are defined: 

<script type="text/javascript" src="">  
{      //Defining a global configuration object
  autoLogin: true,  
  enabledProviders: 'facebook,twitter'  
var socializeConfig = {
var gmConfig = {
var params1 = {
onLoad: function() {alert('loaded')}
var params2 = {
containerID: 'myContainer'


If you now call a method with three parameter objects (arguments), they will merge to form one. For example, if you call gigya.socialize.showLoginUI(socializeConfig,params1,params2), the merged params objects that the method will use is:

    autoLogin:true, // From the global configuration object
    enabledProviders:'facebook,google', // From socializeConfig, overriding the enabledProviders in the global configuration object
    onLoad: function() {alert('loaded')}, // From params1
    containerID: 'myContainer' // From params2


Another example, if you call, params2), the two parameter objects merge into the following params object that the method will use:

    autoLogin:true, // From the global configuration object
    enabledProviders:'facebook,twitter', // From the global configuration object    
    includeChallenges:'challengeA,challengeB', // From gmConfig
    containerID: 'myContainer' // From params2


When using Gigya's API's over HTTPS it is important that the script tag in the <head> of your pages reference the HTTPS version of the JS SDK, (note CDNS as opposed to CDN) e.g.,

<script type="text/javascript" src="https://cdns.<Data_Center>/js/gigya.js?apikey=YOUR-API-KEY-HERE"></script>

Finding your data center