1
1
<!doctype html>
2
2
< html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 " />
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6
+ < title > VapiWidget Embed Test</ title >
7
+ </ head >
3
8
4
- < head >
5
- < meta charset ="UTF-8 " />
6
- < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7
- < title > VapiWidget Embed Test</ title >
8
- </ head >
9
+ < body >
10
+ < h1 > VapiWidget Embed Test</ h1 >
11
+ < p > This page tests embedding the VapiWidget using static HTML.</ p >
9
12
10
- < body >
11
- < h1 > VapiWidget Embed Test</ h1 >
12
- < p > This page tests embedding the VapiWidget using static HTML.</ p >
13
+ <!-- Example 1: Using data attributes -->
14
+ < div
15
+ id ="vapi-widget-1 "
16
+ data-client-widget ="VapiWidget "
17
+ data-public-key ="your-public-key-here "
18
+ data-assistant-id ="your-assistant-id-here "
19
+ data-mode ="voice "
20
+ data-theme ="light "
21
+ data-position ="bottom-right "
22
+ data-size ="compact "
23
+ data-main-label ="Talk with AI "
24
+ data-start-button-text ="Start "
25
+ data-end-button-text ="End Call "
26
+ > </ div >
13
27
14
- <!-- Example 1: Using data attributes -->
15
- < div id ="vapi-widget-1 " data-client-widget ="VapiWidget " data-public-key ="your-public-key-here "
16
- data-assistant-id ="your-assistant-id-here " data-mode ="voice " data-theme ="light " data-position ="bottom-right "
17
- data-size ="compact " data-main-label ="Talk with AI " data-start-button-text ="Start " data-end-button-text ="End Call ">
18
- </ div >
28
+ <!-- Example 2: Using data-props JSON -->
29
+ < div
30
+ id ="vapi-widget-2 "
31
+ data-client-widget ="VapiWidget "
32
+ data-props ='{"publicKey":"your-public-key-here","assistantId":"your-assistant-id-here","mode":"chat","theme":"dark","position":"bottom-left"} '
33
+ > </ div >
19
34
20
- <!-- Example 2: Using data-props JSON -->
21
- < div id ="vapi-widget-2 " data-client-widget ="VapiWidget "
22
- data-props ='{"publicKey":"your-public-key-here","assistantId":"your-assistant-id-here","mode":"chat","theme":"dark","position":"bottom-left"} '>
23
- </ div >
35
+ <!-- Example 3: Using <vapi-widget> custom element -->
36
+ < vapi-widget
37
+ mode ="voice "
38
+ theme ="light "
39
+ base-color ="#ffffff "
40
+ accent-color ="#14B8A6 "
41
+ button-base-color ="#000000 "
42
+ button-accent-color ="#ffffff "
43
+ radius ="large "
44
+ size ="full "
45
+ position ="top-right "
46
+ main-label ="TALK WITH AI "
47
+ start-button-text ="Start "
48
+ end-button-text ="End Call "
49
+ require-consent ="true "
50
+ local-storage-key ="vapi_widget_consent "
51
+ show-transcript ="true "
52
+ public-key ="your-public-key-here "
53
+ assistant-id ="your-assistant-id-here "
54
+ > </ vapi-widget >
24
55
25
- <!-- Example 3: Using <vapi-widget> custom element -->
26
- < vapi-widget mode =" voice " theme =" light " base-color =" #ffffff " accent-color =" #14B8A6 " button-base-color =" #000000 "
27
- button-accent-color =" #ffffff " radius =" large " size =" full " position =" top-right " main-label =" TALK WITH AI "
28
- start-button-text =" Start " end-button-text =" End Call " require-consent =" true " local-storage-key =" vapi_widget_consent "
29
- show-transcript =" true " public-key =" your-public-key-here " assistant-id =" your-assistant-id-here " > </ vapi-widget >
56
+ < script
57
+ src =" ./dist/embed/widget.umd.js "
58
+ async
59
+ type =" text/javascript "
60
+ > </ script >
30
61
31
- < script src ="./dist/embed/widget.umd.js " async type ="text/javascript "> </ script >
32
-
33
- <!-- Optional: Manual initialization example -->
34
- < script >
35
- // The widget should auto-initialize from data attributes
36
- // But you can also manually initialize if needed:
37
- /*
62
+ <!-- Optional: Manual initialization example -->
63
+ < script >
64
+ // The widget should auto-initialize from data attributes
65
+ // But you can also manually initialize if needed:
66
+ /*
38
67
window.addEventListener('DOMContentLoaded', function() {
39
68
if (window.WidgetLoader) {
40
69
new window.WidgetLoader({
@@ -51,7 +80,6 @@ <h1>VapiWidget Embed Test</h1>
51
80
}
52
81
});
53
82
*/
54
- </ script >
55
- </ body >
56
-
57
- </ html >
83
+ </ script >
84
+ </ body >
85
+ </ html >
0 commit comments