@@ -38,8 +38,23 @@ <h1>ACCESS Q&A Bot Standalone Demo</h1>
38
38
< div class ="explanation ">
39
39
< p > This page demonstrates how to integrate the ACCESS Q&A Bot in different ways using the pre-built files.
40
40
No React framework setup is needed - just include the CSS and JS files from the build directory, or from the CDN.</ p >
41
+ < p > You can use either the < strong > jsDelivr CDN</ strong > OR the < strong > unpkg CDN</ strong > :</ p >
41
42
</ div >
42
43
44
+ < div class ="html-code ">
45
+ < pre >
46
+ <!-- jsDelivr CDN (direct from GitHub) -->
47
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/necyberteam/
[email protected] /build/static/css/main.css" />
48
+ <script src="https://cdn.jsdelivr.net/gh/necyberteam/
[email protected] /build/static/js/main.js" />
49
+ <script src="https://cdn.jsdelivr.net/gh/necyberteam/
[email protected] /build/static/js/453.chunk.js" />
50
+
51
+ OR
52
+ <!-- OR unpkg CDN (from npm package) -->
53
+ <script src="https://unpkg.com/@snf/
[email protected] /dist/access-qa-bot.standalone.js" />
54
+ </ pre >
55
+ </ div >
56
+
57
+
43
58
< div class ="demo-section ">
44
59
< h2 > Method 1: Mount React Component to < code > div#qa-bot</ code > </ h2 >
45
60
< p > The floating widget that appears in the bottom-right corner.</ p >
@@ -71,24 +86,24 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
71
86
function initializeQABot ( ) {
72
87
// Method 1: Auto-detect div#qa-bot
73
88
const qaBot = document . getElementById ( 'qa-bot' ) ;
74
- if ( qaBot && window . qAndATool ) {
89
+ if ( qaBot && window . qAndATool && ! qaBot . hasChildNodes ( ) ) {
75
90
window . qAndATool ( {
76
91
target : qaBot ,
77
92
isLoggedIn : ! window . isAnonymous ,
78
- disabled : window . isAnonymous
93
+ isAnonymous : window . isAnonymous
79
94
} ) ;
80
95
}
81
96
82
97
// Method 2: Auto-detect embedded-qa-bot divs
83
98
document . querySelectorAll ( '.embedded-qa-bot' ) . forEach ( container => {
84
- if ( window . qAndATool ) {
99
+ if ( window . qAndATool && ! container . hasChildNodes ( ) ) {
85
100
window . qAndATool ( {
86
101
target : container ,
87
102
embedded : true ,
88
103
welcome : container . dataset . welcome || "Hello!" ,
89
104
prompt : container . dataset . prompt || "Ask me a question..." ,
90
105
isLoggedIn : ! window . isAnonymous ,
91
- disabled : window . isAnonymous
106
+ isAnonymous : window . isAnonymous
92
107
} ) ;
93
108
}
94
109
} ) ;
@@ -113,17 +128,18 @@ <h2>Method 3: Explicitly Call JavaScript Function</h2>
113
128
initializeQABot ( ) ;
114
129
115
130
// Method 3 (explicit JS function call)
116
- if ( window . qAndATool ) {
131
+ const customBot = document . getElementById ( 'custom-qa-bot' ) ;
132
+ if ( window . qAndATool && customBot && ! customBot . hasChildNodes ( ) ) {
117
133
window . qAndATool ( {
118
- target : document . getElementById ( 'custom-qa-bot' ) ,
134
+ target : customBot ,
119
135
embedded : true ,
120
136
welcome : "This is configured using JavaScript!" ,
121
137
prompt : "Try asking a question about ACCESS..." ,
122
138
isLoggedIn : ! window . isAnonymous ,
123
- disabled : window . isAnonymous ,
139
+ isAnonymous : window . isAnonymous ,
124
140
isOpen : true
125
141
} ) ;
126
- } else {
142
+ } else if ( ! window . qAndATool ) {
127
143
console . error ( "qAndATool function not found. Make sure the JS files are loaded properly." ) ;
128
144
}
129
145
} ) ;
0 commit comments