Skip to main content

Cogfy FAB

Cogfy FAB makes it possible for any web application to use Cogfy's chats in its pages. It displays a FAB button connected to a collection in Cogfy.

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',
    // 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'
    },
    themeSettings: {
      color: 'YOUR_THEME_SETTINGS_COLOR',
      text: 'YOUR_THEME_SETTINGS_TEXT_COLOR'
    }
  }
</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.

Cogfy Settings properties​

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

cogfySettings.chatSettings​

Example with all properties:

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 with all properties:

fabSettings: {
  defaultOpen: 'open',
  tooltipMessage: 'Hello! How may I help you?',
  tooltipTimer: 5000
}

cogfySettings.themeSettings​

Example with all properties:

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