Widget Trigger

Description

Activates your workflow upon receiving a message from its corresponding widget. Allows you to perform task based on the text sent by user. Also allows you to customize the widget appearance by setting intro message, company name, description and logo.

Common Use Cases

Creating custom chatbots with specific knowledge base
Perform agentic tasks intelligently with chat commands
Create an intelligent assistant

How to Use

The method is as simple as adding a simple script to your site that too via a CDN. Here are some ways you can add it to your site listed by specific frameworks:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Your Website</title>
</head>
<body>
    <!-- Your content -->
    
    <!-- DeForge Widget Script -->
    <script src="https://cdn.jsdelivr.net/npm/deforge-widget/chatbot.min.js"></script>
    <script>
        const widget = new ChatbotWidget({
            workflowId: "4d4e2caa-fe46-4f5c-9e51-5de0cf8111a9", // Your workflow ID
            theme: "deforge-light", // or "deforge-dark"
            position: "bottom-right" // bottom-left, top-right, top-left
        });
    </script>
</body>
</html>

components/chatbot-widget.tsx

'use client'

import { useEffect } from 'react'

interface ChatbotWidgetProps {
  workflowId: string
  theme?: 'deforge-light' | 'deforge-dark'
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
}

export default function ChatbotWidget({ 
  workflowId, 
  theme = 'deforge-light', 
  position = 'bottom-right' 
}: ChatbotWidgetProps) {
  useEffect(() => {
    // Load the script dynamically
    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/npm/deforge-widget/chatbot.min.js'
    script.async = true
    
    script.onload = () => {
      // Initialize widget after script loads
      if (typeof window !== 'undefined' && (window as any).ChatbotWidget) {
        new (window as any).ChatbotWidget({
          workflowId,
          theme,
          position
        })
      }
    }
    
    document.head.appendChild(script)
    
    // Cleanup
    return () => {
      document.head.removeChild(script)
    }
  }, [workflowId, theme, position])

  return null // Widget renders itself
}

pages/_app.tsx

import { useEffect } from 'react'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/npm/deforge-widget/chatbot.min.js'
    script.async = true
    
    script.onload = () => {
      if (typeof window !== 'undefined' && (window as any).ChatbotWidget) {
        new (window as any).ChatbotWidget({
          workflowId: "4d4e2caa-fe46-4f5c-9e51-5de0cf8111a9",
          theme: "deforge-light",
          position: "bottom-right"
        })
      }
    }
    
    document.head.appendChild(script)
  }, [])

  return <Component {...pageProps} />
}

hooks/useChatbotWidget.ts

import { useEffect } from 'react'

interface UseChatbotWidgetProps {
  workflowId: string
  theme?: 'deforge-light' | 'deforge-dark'
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
}

export function useChatbotWidget({ 
  workflowId, 
  theme = 'deforge-light', 
  position = 'bottom-right' 
}: UseChatbotWidgetProps) {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/npm/deforge-widget/chatbot.min.js'
    script.async = true
    
    script.onload = () => {
      if ((window as any).ChatbotWidget) {
        new (window as any).ChatbotWidget({
          workflowId,
          theme,
          position
        })
      }
    }
    
    document.head.appendChild(script)
    
    return () => {
      if (document.head.contains(script)) {
        document.head.removeChild(script)
      }
    }
  }, [workflowId, theme, position])
}

components/ChatbotWidget.vue

<template>
  <!-- Widget renders itself, no template needed -->
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'

interface Props {
  workflowId: string
  theme?: 'deforge-light' | 'deforge-dark'
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
}

const props = withDefaults(defineProps<Props>(), {
  theme: 'deforge-light',
  position: 'bottom-right'
})

let scriptElement: HTMLScriptElement | null = null

onMounted(() => {
  scriptElement = document.createElement('script')
  scriptElement.src = 'https://cdn.jsdelivr.net/npm/deforge-widget/chatbot.min.js'
  scriptElement.async = true
  
  scriptElement.onload = () => {
    if ((window as any).ChatbotWidget) {
      new (window as any).ChatbotWidget({
        workflowId:props.workflowId,
        theme: props.theme,
        position: props.position
      })
    }
  }
  
  document.head.appendChild(scriptElement)
})

onUnmounted(() => {
  if (scriptElement && document.head.contains(scriptElement)) {
    document.head.removeChild(scriptElement)
  }
})
</script>

services/chatbot-widget-service.ts

import { Injectable } from '@angular/core'

export interface ChatbotWidgetConfig {
  workflowId: string
  theme?: 'deforge-light' | 'deforge-dark'
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
}

@Injectable({
  providedIn: 'root'
})
export class ChatbotWidgetService {
  private scriptLoaded = false

  async loadWidget(config: ChatbotWidgetConfig): Promise<void> {
    if (this.scriptLoaded) {
      this.initializeWidget(config)
      return
    }

    return new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = 'https://cdn.jsdelivr.net/npm/deforge-widget/chatbot.min.js'
      script.async = true
      
      script.onload = () => {
        this.scriptLoaded = true
        this.initializeWidget(config)
        resolve()
      }
      
      script.onerror = () => {
        reject(new Error('Failed to load chatbot widget script'))
      }
      
      document.head.appendChild(script)
    })
  }

  private initializeWidget(config: ChatbotWidgetConfig): void {
    if ((window as any).ChatbotWidget) {
      new (window as any).ChatbotWidget({
        workflowId: config.workflowId,
        theme: config.theme || 'deforge-light',
        position: config.position || 'bottom-right'
      })
    }
  }
}

ChatbotWidget.svelte

<script lang="ts">
  import { onMount, onDestroy } from 'svelte'
  
  export let workflowId: string
  export let theme: 'deforge-light' | 'deforge-dark' = 'deforge-light'
  export let position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' = 'bottom-right'
  
  let scriptElement: HTMLScriptElement | null = null
  
  onMount(() => {
    scriptElement = document.createElement('script')
    scriptElement.src = 'https://cdn.jsdelivr.net/npm/deforge-widget/chatbot.min.js'
    scriptElement.async = true
    
    scriptElement.onload = () => {
      if ((window as any).ChatbotWidget) {
        new (window as any).ChatbotWidget({
          workflowId,
          theme,
          position
        })
      }
    }
    
    document.head.appendChild(scriptElement)
  })
  
  onDestroy(() => {
    if (scriptElement && document.head.contains(scriptElement)) {
      document.head.removeChild(scriptElement)
    }
  })
</script>

<!-- Widget renders itself, no markup needed -->

Inputs

The input connections this node accepts:

NameDescriptionTypeIntroIntro message shown by the botTextCompany NameCompany Name shown in the widget headerTextDescriptionCompany or Chatbot description shown in the widget headerTextLogoCompany Logo shown in the widget header (SVG)Text

Outputs

The output connections this node provides:

NameDescriptionTypeFlowThe Flow to triggerFlowMessageMessage recieved by the botText

Fields

The configurable fields this node provides:

NameDescriptionTypeIntroIntro message shown by the botValue: 🎉 Welcome! I'm your AI assistant. This is a demo workflow. Ask me anything!TextCompany NameCompany Name shown in the widget headerValue: Deforge AssistantTextDescriptionCompany or Chatbot description shown in the widget headerValue: AI Agent is ready to help!TextLogoCompany Logo shown in the widget header (SVG)Value: <svg width="100%"...><path d="M12..."/></svg>TextArea