Print
SDK javascript

Load Library

To create the froged object the SDK script is loaded:

// Load script <script>(function(){var a=document,b=window;if("function"!=typeof Froged){Froged=function(a,b,c){Froged.c(a,b,c)},Froged.q=[],Froged.c=function(a,b,c){Froged.q.push([a,b,c])},fg_data={hooks:{}};var c=function(){var b=a.createElement("script");b.type="text/javascript",b.async=!0,b.src="https://sdk.froged.com";var c=a.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)};"complete"===a.readyState?c():window.attachEvent?b.attachEvent("onload",c):b.addEventListener("load",c,!1)}})()</script><!-- End Froged -->

Methods

With them we can execute actions in the SDK.


Boot

Sets the workspace identifier that the script will use. For greater security, you will have to establish the supported origins for requests from the web application. The
workspace_id is the unique identifier of that workspace. This function will initiate the script call and connect to the server.

// Initialize Froged 
window.frogedSettings = { appId: "workspace_id" }; 
Froged('boot');

Will save a cookie in the browser that later let to auto-connect. It will return a session id that will be automatically saved in the cookie. The next time that visitor (anonymous so far) enters the web, he will be identified with cookie. If the application has already been initialized, a new call will be ignored.

// frogedSettings can include several options
frogedSettings: {
    appId: string,            // Froged Workspace id
    onlyTracking?: boolean,    // Optional: Froged only track. No widget. Default false
    languageCode?: string,     // Optional: Override browser language forcing a custom localization. Default ''
   // Optional: Override froged settings
    settings?: {
        colorMain?: string,
        colorAccent?: string,
        colorBubble?: string,
        defaultLanguage?: string,
        logoLayout?: boolean,
        logoURL?: string,
        moduleDocumentsDisabled?: boolean,
        moduleUpdatesDisabled?: boolean,
        requestEmail?: 'Always' | 'No online agents' | 'Never',
        qualificationFormActive?: boolean,
        gdpr_chat?: boolean,
        gdpr_privacyPolicy?: string,
      }
  };


Logout

With this function disconnect the session from the server and delete the browser cookie. Automatically create a new anonymous session. It is very useful when the user logs out of the application. In this way, all the information, conversations, ... will not be accessible to new visitors from that same computer, who will be identified as anonymous until they are identified.

Froged('logout');


Shutdown

Not only disconnects the session (deleting the session cookie), but it disconnects from the server (eliminating the cookie from the app) so that tracking is stopped. If the browser is reloaded, nothing will be tracked until we call boot. It is useful when we do not want to track visitors, but only logged customers

Froged('shutdown');


Connected

Variable. It allows to know the state in which the script is located. If the boot function was executed, the state that will return us will be true, if not, or make a call to shutdown, the status it will return will be false

Froged('connected'): boolean


Set

With this function the visitor information is updated. To do this, the script must be connected. We can verify this by using the variable connected. Attributes userId and email are especially important with these attributes the merge is made between a visitor and a contact

Froged('set', { 
    userId?,
    email?,
    username?,
    name?,
    firstname?,
    lastname?,
    gender?,
    birthdate?,
    street?,
    city?,
    postalcode?,
    state?,
    country?,
    phone?,
    web?,
    avatar?,                      // IMG URL title?,
    description?,
    company?,
    lat?,                         // Latitude (number) 
    lon?,                         // Longitude (number) 
    newsletter,//bool
    ... 
  });


This method accepts predefined attributes (those listed above and available on Froged) as well as custom attributes previously defined in the app.

Example:

Froged ('set', { 
email: 'example@example.com',
name: 'John Smith',
company: 'Acme'
});

Predefined attributes

Attribute nameTypeDescription
userIdstringUnique contact id
emailstringContact email
namestringFull name of the contact
usernamestringNick or username of contact
firstnamestringContact's firstname
lastnamestringContact's lastname
genderoptionmale | female
birthdatedateContact birthdate
streetstringStreet and number
citystringCity
postalcodestringPostal code / ZIP
statestringState
regionstringRegion
countrystringCountry
phonestringPhone number
webstringWeb
companystringCompany where contact works
titlestringRole in company
descriptionstringRole description
notesstringContact notes
newsletterbooleanContact is suscribed


In the case of tagging a contact, use this code as a reference:
Froged('set', { tags: [ { name: 'tag_name' } ] });
Note: The name tag must exist in the workspace

Track

With this function you can track user events in the application.

Froged('track', eventName: string, { parameters... });

Note: the event must have been previously defined on app.

In Froged we have a list of predefined events you can use. Visit events section: Events

Example:

Froged ('track','on_search', { search_term: 'install'});


Open

Open the widget. Depending on the parameter that is passed, it will open a certain route.

// Open the widget on the last route where it was 
Froged('open');  
// Open the widget on the initialscreen 
Froged('open', 'home');  
// Open the widget in chats inbox
Froged('open','inbox');  
// Open the widget for a newconversation 
Froged('open','contact');  
// Open the widget in documents 
Froged('open','documents');  
// Open the widget in updates 
Froged('open','updates');


Find

You can add a modal finder in your web like this:



Of course, you have to be active your knowledgebase. All you need to do is call this method: 
// Show knowledge base finder
Froged('find');
If you want simplify things, you can simplify things by adding froged_finder to the classes of an HTML element. So, when you click on this element, the finder will appear on the screen.
<!-- METHOD 1 -->
<span class="froged_finder">Click here to show finder</span>

<!-- METHOD 2 (using javascript) -->
<span onclick="Froged('find')">Click here to show finder</span>

Show automessage

Show a specific automessage. You must create this automessage before and then you can call it from Froged SDK

// A automessage will be showed to the contact / visitor 
Froged('automessage', automessageId);


Send message

Sometimes you need to send your support agent a message on behalf of your website user on some custom user action. This method is right for it
// The widget will be opened and a message will be automatically  
// sent on behalf of the user of your website 
Froged('message', text_message);


Show document

Show a document in full modal view

// A modal will be opened with the document 
// that we want to show our visitor
Froged('doc', documentId);


Close

Close the widget

Froged('close');


Opened

It allows you to know the status (open / closed) of the widget

Froged('opened');  // Return true or false


Toggle

Switches the widget

Froged('toggle');


GDPR

By default, our widget will always start. Froged has features to manage the GDPR. You can activate these features in the widget settings.


  • Request cookie & tracking permission
    If this option is active, a message will be displayed asking visitors if they want to be tracked. The chat widget will also be displayed.
    • If visitors click on the Accept cookies button, they will not be asked again
    • If visitors click on the Decline cookies button, the chat widget will be hidden and they will not be asked again
  • Use a customized "allow cookies" button
    This setting allows you to customize your "allow cookies" user interface. So, if it is active, the chat widget will be displayed but visitors will not be asked. It will be you who has to show them that message. In this case, your users will still have two options: accept or decline cookies. So, we offer a method for each one:
// ---------------------------------------------------------------
// These two methods work the same as in the 
// option "Request cookie & tracking permission"
// ---------------------------------------------------------------

// Visitor accepts cookies
Froged('cookieConsent');

// Visitor declines cookies
Froged('cookieDismiss');

Callbacks

With this you can execute code when something specific happens in the SDK

// It is executed when the bubble connects to the server.
Froged('hook', 'onConnect', () => {
    // Right at this point the value of froged.connected is true
    console.log("SDK connected");
});

// It is executed when the bubble disconnects from server.
Froged('hook', 'onDisconnect', () => {
   // Right at this point the value of froged.connected is false
   console.log("SDK disconnected");
});

// It is executed when the bubble is opened
Froged('hook', 'onOpen', () => {
   console.log("The visitor has opened the bubble");
});

// It is executed when the bubble is closed
Froged('hook', 'onClose', () => {
   console.log("The user has closed the bubble");
});

// Change inbox status. It is used to know if the visitor has unread messages
Froged('hook', 'onInboxStatusUpdate', (unreadMessagesCount: number) => {
   if (unreadMessagesCount === 0)
      console.log("No messages. Remove badge");
  else
     console.log("There are messages. Show badge");
});
Was this helpful?