@trigidigital/js
Advanced tools
💫 Powerful JavaScript library to embed interactive chat widgets seamlessly into your website
npm install @trigidigital/js
yarn add @trigidigital/js
<script type="module">
import TrigiDigital from 'https://cdn.jsdelivr.net/npm/@trigidigital/js@latest/dist/web.js'
TrigiDigital.initStandard({
bot: 'my-chat-widget',
})
</script>
Perfect for embedding directly into your page content.
<script type="module">
import TrigiDigital from "https://cdn.jsdelivr.net/npm/@trigidigital/js@latest/dist/web.js";
TrigiDigital.initStandard({
bot: "your-widget-id",
apiHost: "https://your-domain.com",
});
</script>
<trigidigital-standard style="width: 100%; height: 600px;"></trigidigital-standard>
Great for customer support and lead generation.
<script type="module">
import TrigiDigital from "https://cdn.jsdelivr.net/npm/@trigidigital/js@latest/dist/web.js";
TrigiDigital.initPopup({
bot: "your-widget-id",
apiHost: "https://your-domain.com",
autoShowDelay: 3000, // Show after 3 seconds
});
</script>
Control the popup:
// Open the popup
TrigiDigital.open();
// Close the popup
TrigiDigital.close();
// Toggle popup state
TrigiDigital.toggle();
Floating chat button with preview messages.
<script type="module">
import TrigiDigital from "https://cdn.jsdelivr.net/npm/@trigidigital/js@latest/dist/web.js";
TrigiDigital.initBubble({
bot: "your-widget-id",
previewMessage: {
message: "👋 Need help? Ask me anything!",
autoShowDelay: 5000,
avatarUrl: "https://your-domain.com/avatar.jpg",
},
theme: {
button: {
backgroundColor: "#0066CC",
iconColor: "#FFFFFF",
size: "large"
},
previewMessage: {
backgroundColor: "#ffffff",
textColor: "#333333",
closeButtonColor: "#666666"
},
chatWindow: {
backgroundColor: "#ffffff",
height: "600px",
width: "400px"
},
},
});
</script>
Control the bubble:
// Show/hide preview message
TrigiDigital.showPreviewMessage();
TrigiDigital.hidePreviewMessage();
// Open/close chat window
TrigiDigital.open();
TrigiDigital.close();
TrigiDigital.toggle();
Inject dynamic data into your chat widget:
TrigiDigital.initStandard({
bot: "your-widget-id",
prefilledVariables: {
"User Name": "John Doe",
"Current Page": window.location.href,
"User Email": "john@example.com",
"Plan Type": "Premium",
},
});
TrigiDigital.initBubble({
bot: "your-widget-id",
theme: {
button: {
backgroundColor: "#FF6B6B",
iconColor: "#FFFFFF",
customIconSrc: "https://your-domain.com/custom-icon.svg",
size: "medium", // small, medium, large
borderRadius: "50%",
boxShadow: "0 4px 20px rgba(255, 107, 107, 0.4)",
},
chatWindow: {
backgroundColor: "#F8F9FA",
borderRadius: "16px",
maxHeight: "80vh",
maxWidth: "450px",
},
previewMessage: {
backgroundColor: "#FFFFFF",
textColor: "#2D3748",
borderRadius: "12px",
fontSize: "14px",
}
},
});
// Listen for chat events
TrigiDigital.onChatStart(() => {
console.log("💬 Chat started!");
// Track analytics, show notifications, etc.
});
TrigiDigital.onChatEnd(() => {
console.log("👋 Chat ended!");
// Clean up, save state, etc.
});
TrigiDigital.onMessage((message) => {
console.log("📩 New message:", message);
// Handle message events
});
<!DOCTYPE html>
<html>
<head>
<title>My Website with TrigiDigital</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<script type="module">
import TrigiDigital from "https://cdn.jsdelivr.net/npm/@trigidigital/js@latest/dist/web.js";
TrigiDigital.initBubble({
bot: "welcome-assistant",
previewMessage: {
message: "👋 Welcome! How can I help you today?",
autoShowDelay: 2000,
}
});
</script>
</body>
</html>
import { useEffect } from 'react';
function App() {
useEffect(() => {
import('@trigidigital/js').then(({ default: TrigiDigital }) => {
TrigiDigital.initBubble({
bot: 'support-chat',
previewMessage: {
message: '💬 Questions? We\'re here to help!',
autoShowDelay: 3000,
}
});
});
}, []);
return (
<div className="App">
<h1>My React App</h1>
{/* Your app content */}
</div>
);
}
<template>
<div id="app">
<h1>My Vue App</h1>
<!-- Your app content -->
</div>
</template>
<script>
export default {
name: 'App',
async mounted() {
const { default: TrigiDigital } = await import('@trigidigital/js');
TrigiDigital.initStandard({
bot: 'vue-support',
prefilledVariables: {
'Framework': 'Vue.js',
'Version': this.$options.version
}
});
}
}
</script>
Initialize a standard embedded widget.
Parameters:
bot (string): Your widget identifierapiHost (string, optional): Custom API endpointprefilledVariables (object, optional): Pre-populate variablestheme (object, optional): Custom styling optionsInitialize a popup modal widget.
Parameters:
bot (string): Your widget identifierapiHost (string, optional): Custom API endpointautoShowDelay (number, optional): Auto-open delay in millisecondsprefilledVariables (object, optional): Pre-populate variablestheme (object, optional): Custom styling optionsInitialize a floating chat bubble.
Parameters:
bot (string): Your widget identifierapiHost (string, optional): Custom API endpointpreviewMessage (object, optional): Preview message configurationtheme (object, optional): Comprehensive theming optionsTrigiDigital automatically registers custom HTML elements:
<!-- Standard widget -->
<trigidigital-standard
bot="your-widget-id"
style="width: 100%; height: 500px;">
</trigidigital-standard>
<!-- Chat bubble -->
<trigidigital-bubble
bot="your-widget-id"
preview-message="👋 Hi there! Need assistance?">
</trigidigital-bubble>
<!-- Popup trigger -->
<trigidigital-popup
bot="your-widget-id"
auto-show-delay="5000">
</trigidigital-popup>
TrigiDigital.initBubble({
bot: "customer-support",
previewMessage: {
message: "🆘 Need help? Our support team is online!",
autoShowDelay: 10000,
},
theme: {
button: { backgroundColor: "#28A745", iconColor: "#FFFFFF" }
}
});
TrigiDigital.initPopup({
bot: "lead-capture",
autoShowDelay: 30000, // Show after 30 seconds
prefilledVariables: {
"Traffic Source": document.referrer,
"Current Page": window.location.pathname
}
});
TrigiDigital.initStandard({
bot: "knowledge-assistant",
prefilledVariables: {
"User Type": "Documentation Reader",
"Section": "Getting Started"
}
});
Widget not showing:
bot ID is correctStyling issues:
Variable passing:
Enable debug logging:
TrigiDigital.initBubble({
bot: "your-widget-id",
debug: true, // Enable console logging
});
FAQs
Javascript library to display trigidigital widgets on your website
The npm package @trigidigital/js receives a total of 9 weekly downloads. As such, @trigidigital/js popularity was classified as not popular.
We found that @trigidigital/js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.