window.frogedSettings = { appId: "workspace_id" }; 

// 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 ''
    kbTags: [string],         // Optional: An array of documents tags visibles in widget. By default [] (all public documents are visible)
   // Optional: Override froged settings
    settings: {
        hidden: boolean,
        position: 'left' | 'right',
        colorMain: string,
        colorAccent: string,
        colorBubble: string,
        defaultLanguage: string,
        logoLayout: boolean,
        logoURL: string,
        moduleChatDisabled: boolean,
        moduleDocumentsDisabled: boolean,
        moduleUpdatesDisabled: boolean,
        requestEmail: 'Always' | 'No online agents' | 'Never',
        qualificationFormActive: boolean,
        gdpr_chat: boolean,
        gdpr_privacyPolicy: string,
      }
  };

Methods

With them we can execute actions in the SDK.

Boot

This function will initiate the script call and connect to the server. Note: This function does not need to be included for normal operation, because it is already included in the installation script

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.

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 you call boot function. 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

Auth

Froged('auth'): { sessionId: string, email: string, userId: string, verified: 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
    whatsappNumber, //Whatsapp Number format E.164 ([+][country code][number])
    ... 
  });

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'
});

Froged('set', {
        userId: 'userIdInYourSystem',
        email :'userEmail',
        account: {
                accountId: 'accountIdInYourSystem',
                name: 'accountName',
                myCustomAccountTextAttribute: 'example'
        }
});

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');

Open a specific conversation

Froged('thread','conversation_id');

Find

// Show knowledge base finder
Froged('find');

// Show knowledge base finder with a search phrase
Froged('find','search text');

<!-- 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>

Filter documents

frogedSettings: {

    // Other Froged settings
    ...,

    kbTags: ['level1', 'level2'],

    // Other Froged settings
    ...

};

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

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

// A flow will be showed to the contact / visitor 
Froged('flow', flowId);

Send message

// The widget will be opened and a message will be automatically  
// sent on behalf of the user of your website 
Froged('message', "text_message");

Froged('ticket', 'ticket_id', 'Starting 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

• 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', (auth: { sessionId, email, userId, verified }) => {
    // Right at this point the value of froged.connected is true
    console.log("SDK connected");
    // The callback offers information about session (id, email, userId, verified)
    console.log({ auth });
});

// It is executed when session info changes (for example, a user logins)
Froged('hook', 'onAuth', (auth: { sessionId, email, userId, verified }) => {
    // You can get session info updated
    console.log({ auth });
});

// 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");
});

// Unread conversations list callback. In order to make it works,
// you need to call Froged('listen') previously
Froged('hook', 'onInboxUpdate', (unreadConversations: []) => {
   console.log(unreadConversations);
});

// It is executed when an automessage is triggered and before
// determine if it must be showed. You can use this callback in order
// to avoid showing automessages and not being these accounted in the metrics
Froged('hook', 'onAutomessageRequest', (idAutomessage) => {
   
   // Your staff here

   // You can customize actions. We provide:
   //   - idAutomessage: the automessage id

   // If return false, no actions (avoid automessage)
   // If return true, automessage will be processed

});

// It is executed just before an automessage is showed. You can
// avoid it returning false but it is already counted on metrics
Froged('hook', 'onAutomessageOpen', (idAutomessage) => {
   
   // Your staff here

   // You can customize actions and avoid the automessage. We provide:
   //   - idAutomessage: the automessage id

   // If return false, no actions (avoid automessage showing)
   // If return true, the automessage will be showed

});

// It is executed when the user click on a link in an automessage
Froged('hook', 'onAutomessageClick', (idAutomessage, uuid, href, name, target) => {
   
   // Your staff here

   // You can customize actions and avoid default navigation. We provide:
   //   - idAutomessage: the automessage id
   //   - uuid: unique id for this automessageClick event
   //   - href: url to redirect
   //   - name: html element name
   //   - target: link target

   // If return false, no actions (avoid default navigation)
   // If return true, open URL

});