Cogfy FAB

Cogfy FAB allows you to seamlessly embed Cogfy’s chat functionality into any web page using a floating action button. With a simple <script> tag integration, the FAB connects to a chat field in your collection and opens a conversation window directly on your site. Each interaction creates a new record in the associated chat field, making it easy to track and manage conversations initiated through your web application.

Usage

Add the following <script> elements to your HTML code:

<script>
  const fabJsEndpoint = 'https://main.d1rvh4fennzpsd.amplifyapp.com/assets/cogfy-fab.js'

  // Required window settings
  window.cogfySettings = {
    // Required
    apiKey: 'YOUR_COGFY_CHAT_API_KEY',
    // Optional
    baseURL: 'YOUR_CUSTOM_API_URL',
    // Required
    chatSettings: {
      collectionId: 'YOUR_COGFY_CHAT_COLLECTION_ID',
      createChatCommand: {
        fieldId: 'YOUR_COGFY_CHAT_FIELD_ID',
        recordId: 'YOUR_COGFY_CHAT_RECORD_ID',
        properties: 'YOUR_COGFY_CHAT_PROPERTIES',
        messages: 'YOUR_COGFY_CHAT_MESSAGES'
      },
      assistantProperties: {
        name: 'YOUR_CUSTOM_CHAT_ASSISTANT_NAME',
        avatarUrl: 'YOUR_CUSTOM_CHAT_ASSISTANT_AVATAR_URL'
      }
    },
    // Optional
    fabSettings: {
      defaultOpen: 'YOUR_FAB_SETTINGS_DEFAULT_OPEN',
      tooltipMessage: 'YOUR_FAB_SETTINGS_TOOLTIP_MESSAGE',
      tooltipTimer: 'YOUR_FAB_SETTINGS_TOOLTIP_TIMER',
      iconUrl: 'YOUR_FAB_SETTINGS_ICON_URL'
    },
    themeSettings: {
      color: 'YOUR_THEME_SETTINGS_COLOR',
      text: 'YOUR_THEME_SETTINGS_TEXT_COLOR'
    },
    language: 'YOUR_LANGUAGE_CODE'
  }
</script>
<script>
  (function l(){const r=(Math.random()*100).toFixed(0).toString(),s=`cache-busting-${r}`,t=document.createElement('script');t.src=`${fabJsEndpoint}`,t.async=!0,document.head.appendChild(t);})();
</script>

warning

FAB component exposes all settings through the window.cogfySettings object. You must use a Cogfy API Key exclusively for the FAB component, ensuring it is restricted to the Chat permission. This prevents unauthorized access and enhances security.

info

If you have a custom Cogfy deploy, set the baseURL to your custom API route

Triggering Chat Messages from Your Page

For advanced integrations, the Cogfy FAB exposes a global window.cogfyFab.sendMessage function. This allows you to programmatically send messages into the chat from anywhere on your page—perfect for use cases like clickable FAQ sections or context-aware onboarding prompts. Just call window.cogfyFab.sendMessage("your message") and the text will appear in the chat as if the user had typed it. This feature unlocks new levels of interactivity with minimal effort.

<button
  onclick="window.cogfyFab.sendMessage('How can I subscribe to the newsletter?')"
>
  Learn more
</button>

Cogfy Settings properties

The cogfySettings property is accessible via the window object on the page

cogfySettings.chatSettings

Example of the required chat settings with all properties configured:

chatSettings: {
  collectionId: '06e80e6f-b23c-405f-9581-265498801b6b',
  createChatCommand: {
    fieldId: 'ceffc175-a630-4a3c-a573-85d741d8a173',
    recordId: 'bf8bd861-d813-487e-bdb8-84fdcba0366f'
    properties: {
      "85a00a5d-56fa-4891-bd40-ac2e1e533207": {
        "type": "text",
        "text": {
          "value": "Text value"
        }
      }
    },
    messages: "messages": [
      {
        "role": "assistant",
        "content": "Hello! How may I help you?"
      },
      {
        "role": "user",
        "content": "What is Bhaskara equation used for?"
      }
    ]
  },
  assistantProperties: {
    name: 'Cogfy',
    avatarUrl: 'https://ibb.co/v4PXM3C'
  }
}

cogfySettings.fabSettings

Example of the optional UX settings with all properties configured:

fabSettings: {
  defaultOpen: 'open',
  tooltipMessage: 'Hello! How may I help you?',
  tooltipTimer: 5000,
  iconUrl: 'https://ibb.co/v4PXM3C'
}

cogfySettings.themeSettings

Example of the optional UI settings with all properties configured:

themeSettings: {
  color: '#FFF',
  text: '#000'
}

cogfySettings.language

The default language is 'en-us'.

Example of the optional language setting:

language: 'pt-br'