diff --git a/.gitbook/assets/file.excalidraw.svg b/.gitbook/assets/file.excalidraw.svg new file mode 100644 index 0000000..2cbd8bb --- /dev/null +++ b/.gitbook/assets/file.excalidraw.svg @@ -0,0 +1,16 @@ + + + eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nM2XWW/bRlx1MDAxMIDf/StcYua1ZfY+/JbETuK2XHUwMDBliljI0aJcYmhyTW205lx1MDAxMuRKtlx1MDAxYfi/Z0jJWkp24LiIXHUwMDFi71x1MDAwM1x1MDAwMc6hmZ39Zrj6spckaVg2Jt1PUnNZ5M6WbX6R/tLLXHUwMDE3pu2sr0FFhvfOz9tisJyG0HT7T5/mTZNVNpx6P8tcbn++cjPOnJs6dGD4N7wnyZfhOVxu1JpcIuR15czgMKhiLCl3hW98PYTFgnIpJVx1MDAxNXRjYbtcdTAwMDNcYlx1MDAxN0xcdOqz3HUmanpRql9/Ur9N6l///IB59eb4wOOP5nOMemadO1x0S7faVF5M5+0opy60fmbe2zJM++g78o1f56Fo0av182pam67b8vFNXtiw7GVcYm2kq1wi7CdRclx0b0LSjMKSXGZcdTAwMTHKqORcdTAwMWLt4E9xxlx1MDAwNeGYXHUwMDEzrqTSSOwk9sI73/aJPUHDiqmd5sWsgvzqcmNcdTAwMTPavO6avIVcdTAwMDOLdlx1MDAxN+stXHUwMDBihTOMMUFcdTAwMDJxJtQokamx1TSAXHSjq1xcXHUwMDE55YgrrllMxlxmp0JcdTAwMTlcdTAwMTPgy6Jvn0FzVFx1MDAwZXz8My5bXa7LdlxyTESGriVXcS+9/eFcYrX4U/OmzFdIYKE5g4JTqVksk7P1XGaU9dy5KPPFLFK0N4p1P3qhXFzfxFx1MDAxNzNNXHUwMDEwXHUwMDEz8rvp/Xx42JRcdTAwMDdH77rp8Vx1MDAxMeeL41x1MDAxY7d//PX46SVcdTAwMTnpl4a6XHUwMDAznWSLXq5QxjhmXHUwMDAyS421JuRcdTAwMDHhXHUwMDFk8qBcdTAwMWMjyVxiVvomvISLTMBSXHUwMDEyYSzxXHUwMDE48DW9XHUwMDE4aVx0Y0dcIv0z8Vx1MDAxNVhw+aPwXHLmMtxKLtHfXCJXaFhcdTAwMWOS+G5y25Pm0swmr5754m31XFzJyWJcdTAwMTY+PHZylVaZUkpLiTiSXG5vk0spyjBMZFx1MDAwNbOXKUXUg5FcdTAwMGKwZitmb524OLsxZDHHWiiBRrPlbky3XHUwMDAwulx1MDAwZo+aYqTQPXiM5+7rcGL/XHUwMDFkWkJsSV/m59Ytr69cdTAwMWErYHtQoVYvrTNdcurLZeJsN6pXb/DM2aqnN3XmbFx1MDAxYutg4TazUVx1MDAwN99EbVx1MDAwMVx1MDAwMXNbm/ao3E3ct7ayde4md1x1MDAwNYddm9fXZ1x1MDAwMp9JPjruzvTafpPkP7VcIlx1MDAxOVx1MDAxNWenXHUwMDE1XHRcIjA0iYi9eudcdTAwMTWoXHUwMDE0x+JV3dj5wk8+uXxuf/84e/StqHTGsWKUiJ3BvFx1MDAxY+ZcdTAwMTHPkGJcdTAwMTLDXHUwMDE1ifeT++FakUHT72TwmDpcdTAwMTGuXSNcdTAwMTT+n04sW98kUK/8Z3TiLcHv1YnwXHUwMDFj6pnCX5eTXHUwMDAw1dx8r+GcbLkuSUwkXVhz8fwmNU/OhpXurbu77yMzfPyv9q6+XHUwMDAy/6tcXJoifQ== + + + + Files body listFiles drop area \ No newline at end of file diff --git a/.gitbook/assets/image (1) (1).png b/.gitbook/assets/image (1) (1).png index 097d932..1061e02 100644 Binary files a/.gitbook/assets/image (1) (1).png and b/.gitbook/assets/image (1) (1).png differ diff --git a/.gitbook/assets/image (1).png b/.gitbook/assets/image (1).png index d5df8c2..9a94dae 100644 Binary files a/.gitbook/assets/image (1).png and b/.gitbook/assets/image (1).png differ diff --git a/.gitbook/assets/image (10).png b/.gitbook/assets/image (10).png index 7d50866..6c44af3 100644 Binary files a/.gitbook/assets/image (10).png and b/.gitbook/assets/image (10).png differ diff --git a/.gitbook/assets/image (11).png b/.gitbook/assets/image (11).png index be39695..1882fe2 100644 Binary files a/.gitbook/assets/image (11).png and b/.gitbook/assets/image (11).png differ diff --git a/.gitbook/assets/image (12).png b/.gitbook/assets/image (12).png index 6aa134f..9a570d5 100644 Binary files a/.gitbook/assets/image (12).png and b/.gitbook/assets/image (12).png differ diff --git a/.gitbook/assets/image (13).png b/.gitbook/assets/image (13).png index bc2c653..acd3b8a 100644 Binary files a/.gitbook/assets/image (13).png and b/.gitbook/assets/image (13).png differ diff --git a/.gitbook/assets/image (14).png b/.gitbook/assets/image (14).png index 005d433..2ac5344 100644 Binary files a/.gitbook/assets/image (14).png and b/.gitbook/assets/image (14).png differ diff --git a/.gitbook/assets/image (15).png b/.gitbook/assets/image (15).png index 1d83022..7d50866 100644 Binary files a/.gitbook/assets/image (15).png and b/.gitbook/assets/image (15).png differ diff --git a/.gitbook/assets/image (16).png b/.gitbook/assets/image (16).png index 94b539b..eabd1c6 100644 Binary files a/.gitbook/assets/image (16).png and b/.gitbook/assets/image (16).png differ diff --git a/.gitbook/assets/image (17).png b/.gitbook/assets/image (17).png index 707cc5e..1d2b01c 100644 Binary files a/.gitbook/assets/image (17).png and b/.gitbook/assets/image (17).png differ diff --git a/.gitbook/assets/image (18).png b/.gitbook/assets/image (18).png index 8cf91e2..503d596 100644 Binary files a/.gitbook/assets/image (18).png and b/.gitbook/assets/image (18).png differ diff --git a/.gitbook/assets/image (19).png b/.gitbook/assets/image (19).png index af3a0d2..859bbea 100644 Binary files a/.gitbook/assets/image (19).png and b/.gitbook/assets/image (19).png differ diff --git a/.gitbook/assets/image (2).png b/.gitbook/assets/image (2).png index aba6c91..8913d01 100644 Binary files a/.gitbook/assets/image (2).png and b/.gitbook/assets/image (2).png differ diff --git a/.gitbook/assets/image (20).png b/.gitbook/assets/image (20).png index 9a570d5..357b137 100644 Binary files a/.gitbook/assets/image (20).png and b/.gitbook/assets/image (20).png differ diff --git a/.gitbook/assets/image (21).png b/.gitbook/assets/image (21).png index 155ecd3..be39695 100644 Binary files a/.gitbook/assets/image (21).png and b/.gitbook/assets/image (21).png differ diff --git a/.gitbook/assets/image (22).png b/.gitbook/assets/image (22).png index 503d596..281637e 100644 Binary files a/.gitbook/assets/image (22).png and b/.gitbook/assets/image (22).png differ diff --git a/.gitbook/assets/image (23).png b/.gitbook/assets/image (23).png index 0312379..8c77327 100644 Binary files a/.gitbook/assets/image (23).png and b/.gitbook/assets/image (23).png differ diff --git a/.gitbook/assets/image (24).png b/.gitbook/assets/image (24).png index 8c77327..3528235 100644 Binary files a/.gitbook/assets/image (24).png and b/.gitbook/assets/image (24).png differ diff --git a/.gitbook/assets/image (25).png b/.gitbook/assets/image (25).png index 357b137..a9fe7f3 100644 Binary files a/.gitbook/assets/image (25).png and b/.gitbook/assets/image (25).png differ diff --git a/.gitbook/assets/image (26).png b/.gitbook/assets/image (26).png index 56c5b66..8cf91e2 100644 Binary files a/.gitbook/assets/image (26).png and b/.gitbook/assets/image (26).png differ diff --git a/.gitbook/assets/image (27).png b/.gitbook/assets/image (27).png index 6c44af3..63f1662 100644 Binary files a/.gitbook/assets/image (27).png and b/.gitbook/assets/image (27).png differ diff --git a/.gitbook/assets/image (28).png b/.gitbook/assets/image (28).png index 28b4058..ecc0fe4 100644 Binary files a/.gitbook/assets/image (28).png and b/.gitbook/assets/image (28).png differ diff --git a/.gitbook/assets/image (29).png b/.gitbook/assets/image (29).png index cefc54e..aba6c91 100644 Binary files a/.gitbook/assets/image (29).png and b/.gitbook/assets/image (29).png differ diff --git a/.gitbook/assets/image (3).png b/.gitbook/assets/image (3).png index 4831abf..503d596 100644 Binary files a/.gitbook/assets/image (3).png and b/.gitbook/assets/image (3).png differ diff --git a/.gitbook/assets/image (30).png b/.gitbook/assets/image (30).png index a8e4132..abdf0c1 100644 Binary files a/.gitbook/assets/image (30).png and b/.gitbook/assets/image (30).png differ diff --git a/.gitbook/assets/image (31).png b/.gitbook/assets/image (31).png index 6811daf..94b539b 100644 Binary files a/.gitbook/assets/image (31).png and b/.gitbook/assets/image (31).png differ diff --git a/.gitbook/assets/image (32).png b/.gitbook/assets/image (32).png index a9fe7f3..af3a0d2 100644 Binary files a/.gitbook/assets/image (32).png and b/.gitbook/assets/image (32).png differ diff --git a/.gitbook/assets/image (33).png b/.gitbook/assets/image (33).png index 8f6fe40..94b539b 100644 Binary files a/.gitbook/assets/image (33).png and b/.gitbook/assets/image (33).png differ diff --git a/.gitbook/assets/image (34).png b/.gitbook/assets/image (34).png index 3528235..fec8b19 100644 Binary files a/.gitbook/assets/image (34).png and b/.gitbook/assets/image (34).png differ diff --git a/.gitbook/assets/image (35).png b/.gitbook/assets/image (35).png index 12f77df..8f047bb 100644 Binary files a/.gitbook/assets/image (35).png and b/.gitbook/assets/image (35).png differ diff --git a/.gitbook/assets/image (36).png b/.gitbook/assets/image (36).png index fde6971..48716b8 100644 Binary files a/.gitbook/assets/image (36).png and b/.gitbook/assets/image (36).png differ diff --git a/.gitbook/assets/image (37).png b/.gitbook/assets/image (37).png index 2b87035..4831abf 100644 Binary files a/.gitbook/assets/image (37).png and b/.gitbook/assets/image (37).png differ diff --git a/.gitbook/assets/image (38).png b/.gitbook/assets/image (38).png index 87c57ea..4de550d 100644 Binary files a/.gitbook/assets/image (38).png and b/.gitbook/assets/image (38).png differ diff --git a/.gitbook/assets/image (39).png b/.gitbook/assets/image (39).png index 804d02d..8f212ec 100644 Binary files a/.gitbook/assets/image (39).png and b/.gitbook/assets/image (39).png differ diff --git a/.gitbook/assets/image (4).png b/.gitbook/assets/image (4).png index 8f047bb..6861730 100644 Binary files a/.gitbook/assets/image (4).png and b/.gitbook/assets/image (4).png differ diff --git a/.gitbook/assets/image (40).png b/.gitbook/assets/image (40).png index a759080..be3bec4 100644 Binary files a/.gitbook/assets/image (40).png and b/.gitbook/assets/image (40).png differ diff --git a/.gitbook/assets/image (41).png b/.gitbook/assets/image (41).png index 023f16f..7072afe 100644 Binary files a/.gitbook/assets/image (41).png and b/.gitbook/assets/image (41).png differ diff --git a/.gitbook/assets/image (42).png b/.gitbook/assets/image (42).png index 63f1662..2ef432a 100644 Binary files a/.gitbook/assets/image (42).png and b/.gitbook/assets/image (42).png differ diff --git a/.gitbook/assets/image (44).png b/.gitbook/assets/image (44).png index 2ef432a..707cc5e 100644 Binary files a/.gitbook/assets/image (44).png and b/.gitbook/assets/image (44).png differ diff --git a/.gitbook/assets/image (45).png b/.gitbook/assets/image (45).png index acd3b8a..1ac2b04 100644 Binary files a/.gitbook/assets/image (45).png and b/.gitbook/assets/image (45).png differ diff --git a/.gitbook/assets/image (46).png b/.gitbook/assets/image (46).png index c60d825..28b4058 100644 Binary files a/.gitbook/assets/image (46).png and b/.gitbook/assets/image (46).png differ diff --git a/.gitbook/assets/image (47).png b/.gitbook/assets/image (47).png index 5f801c8..12f77df 100644 Binary files a/.gitbook/assets/image (47).png and b/.gitbook/assets/image (47).png differ diff --git a/.gitbook/assets/image (48).png b/.gitbook/assets/image (48).png index 1ac2b04..8b9ce00 100644 Binary files a/.gitbook/assets/image (48).png and b/.gitbook/assets/image (48).png differ diff --git a/.gitbook/assets/image (49).png b/.gitbook/assets/image (49).png index f8accc0..ed96fbb 100644 Binary files a/.gitbook/assets/image (49).png and b/.gitbook/assets/image (49).png differ diff --git a/.gitbook/assets/image (5).png b/.gitbook/assets/image (5).png index d5df8c2..2b87035 100644 Binary files a/.gitbook/assets/image (5).png and b/.gitbook/assets/image (5).png differ diff --git a/.gitbook/assets/image (50).png b/.gitbook/assets/image (50).png index 26aab6b..56c5b66 100644 Binary files a/.gitbook/assets/image (50).png and b/.gitbook/assets/image (50).png differ diff --git a/.gitbook/assets/image (51).png b/.gitbook/assets/image (51).png index 7072afe..6811daf 100644 Binary files a/.gitbook/assets/image (51).png and b/.gitbook/assets/image (51).png differ diff --git a/.gitbook/assets/image (52).png b/.gitbook/assets/image (52).png index 71afb2f..1d83022 100644 Binary files a/.gitbook/assets/image (52).png and b/.gitbook/assets/image (52).png differ diff --git a/.gitbook/assets/image (53).png b/.gitbook/assets/image (53).png index 8db5163..8f6fe40 100644 Binary files a/.gitbook/assets/image (53).png and b/.gitbook/assets/image (53).png differ diff --git a/.gitbook/assets/image (54).png b/.gitbook/assets/image (54).png index 8b9ce00..cefc54e 100644 Binary files a/.gitbook/assets/image (54).png and b/.gitbook/assets/image (54).png differ diff --git a/.gitbook/assets/image (55).png b/.gitbook/assets/image (55).png index 8492358..155ecd3 100644 Binary files a/.gitbook/assets/image (55).png and b/.gitbook/assets/image (55).png differ diff --git a/.gitbook/assets/image (56).png b/.gitbook/assets/image (56).png index 859bbea..5f801c8 100644 Binary files a/.gitbook/assets/image (56).png and b/.gitbook/assets/image (56).png differ diff --git a/.gitbook/assets/image (57).png b/.gitbook/assets/image (57).png index fec8b19..d5df8c2 100644 Binary files a/.gitbook/assets/image (57).png and b/.gitbook/assets/image (57).png differ diff --git a/.gitbook/assets/image (58).png b/.gitbook/assets/image (58).png index 2ac5344..62c18e1 100644 Binary files a/.gitbook/assets/image (58).png and b/.gitbook/assets/image (58).png differ diff --git a/.gitbook/assets/image (59).png b/.gitbook/assets/image (59).png index 8f212ec..bc2c653 100644 Binary files a/.gitbook/assets/image (59).png and b/.gitbook/assets/image (59).png differ diff --git a/.gitbook/assets/image (6).png b/.gitbook/assets/image (6).png index dbea25e..7834aea 100644 Binary files a/.gitbook/assets/image (6).png and b/.gitbook/assets/image (6).png differ diff --git a/.gitbook/assets/image (60).png b/.gitbook/assets/image (60).png index 872bfd5..c9148d9 100644 Binary files a/.gitbook/assets/image (60).png and b/.gitbook/assets/image (60).png differ diff --git a/.gitbook/assets/image (61).png b/.gitbook/assets/image (61).png index 1d2b01c..097d932 100644 Binary files a/.gitbook/assets/image (61).png and b/.gitbook/assets/image (61).png differ diff --git a/.gitbook/assets/image (62).png b/.gitbook/assets/image (62).png index 7b48287..a759080 100644 Binary files a/.gitbook/assets/image (62).png and b/.gitbook/assets/image (62).png differ diff --git a/.gitbook/assets/image (63).png b/.gitbook/assets/image (63).png index 7834aea..cf561d2 100644 Binary files a/.gitbook/assets/image (63).png and b/.gitbook/assets/image (63).png differ diff --git a/.gitbook/assets/image (64).png b/.gitbook/assets/image (64).png index 8cf91e2..804d02d 100644 Binary files a/.gitbook/assets/image (64).png and b/.gitbook/assets/image (64).png differ diff --git a/.gitbook/assets/image (65).png b/.gitbook/assets/image (65).png index 8913d01..c60d825 100644 Binary files a/.gitbook/assets/image (65).png and b/.gitbook/assets/image (65).png differ diff --git a/.gitbook/assets/image (66).png b/.gitbook/assets/image (66).png index c60a150..872bfd5 100644 Binary files a/.gitbook/assets/image (66).png and b/.gitbook/assets/image (66).png differ diff --git a/.gitbook/assets/image (67).png b/.gitbook/assets/image (67).png index 281637e..f8accc0 100644 Binary files a/.gitbook/assets/image (67).png and b/.gitbook/assets/image (67).png differ diff --git a/.gitbook/assets/image (68).png b/.gitbook/assets/image (68).png index 6861730..005d433 100644 Binary files a/.gitbook/assets/image (68).png and b/.gitbook/assets/image (68).png differ diff --git a/.gitbook/assets/image (69).png b/.gitbook/assets/image (69).png index f2dbea5..26aab6b 100644 Binary files a/.gitbook/assets/image (69).png and b/.gitbook/assets/image (69).png differ diff --git a/.gitbook/assets/image (7).png b/.gitbook/assets/image (7).png index 62c18e1..217e7a2 100644 Binary files a/.gitbook/assets/image (7).png and b/.gitbook/assets/image (7).png differ diff --git a/.gitbook/assets/image (70).png b/.gitbook/assets/image (70).png new file mode 100644 index 0000000..71afb2f Binary files /dev/null and b/.gitbook/assets/image (70).png differ diff --git a/.gitbook/assets/image (71).png b/.gitbook/assets/image (71).png new file mode 100644 index 0000000..a99169c Binary files /dev/null and b/.gitbook/assets/image (71).png differ diff --git a/.gitbook/assets/image (72).png b/.gitbook/assets/image (72).png new file mode 100644 index 0000000..0312379 Binary files /dev/null and b/.gitbook/assets/image (72).png differ diff --git a/.gitbook/assets/image (73).png b/.gitbook/assets/image (73).png new file mode 100644 index 0000000..8db5163 Binary files /dev/null and b/.gitbook/assets/image (73).png differ diff --git a/.gitbook/assets/image (74).png b/.gitbook/assets/image (74).png new file mode 100644 index 0000000..a8e4132 Binary files /dev/null and b/.gitbook/assets/image (74).png differ diff --git a/.gitbook/assets/image (75).png b/.gitbook/assets/image (75).png new file mode 100644 index 0000000..005d433 Binary files /dev/null and b/.gitbook/assets/image (75).png differ diff --git a/.gitbook/assets/image (76).png b/.gitbook/assets/image (76).png new file mode 100644 index 0000000..8492358 Binary files /dev/null and b/.gitbook/assets/image (76).png differ diff --git a/.gitbook/assets/image (77).png b/.gitbook/assets/image (77).png new file mode 100644 index 0000000..fde6971 Binary files /dev/null and b/.gitbook/assets/image (77).png differ diff --git a/.gitbook/assets/image (78).png b/.gitbook/assets/image (78).png new file mode 100644 index 0000000..023f16f Binary files /dev/null and b/.gitbook/assets/image (78).png differ diff --git a/.gitbook/assets/image (79).png b/.gitbook/assets/image (79).png new file mode 100644 index 0000000..3068066 Binary files /dev/null and b/.gitbook/assets/image (79).png differ diff --git a/.gitbook/assets/image (8).png b/.gitbook/assets/image (8).png index 94b539b..4fcd23c 100644 Binary files a/.gitbook/assets/image (8).png and b/.gitbook/assets/image (8).png differ diff --git a/.gitbook/assets/image (80).png b/.gitbook/assets/image (80).png new file mode 100644 index 0000000..dbea25e Binary files /dev/null and b/.gitbook/assets/image (80).png differ diff --git a/.gitbook/assets/image (81).png b/.gitbook/assets/image (81).png new file mode 100644 index 0000000..87c57ea Binary files /dev/null and b/.gitbook/assets/image (81).png differ diff --git a/.gitbook/assets/image (82).png b/.gitbook/assets/image (82).png new file mode 100644 index 0000000..a5b701c Binary files /dev/null and b/.gitbook/assets/image (82).png differ diff --git a/.gitbook/assets/image (83).png b/.gitbook/assets/image (83).png new file mode 100644 index 0000000..7b48287 Binary files /dev/null and b/.gitbook/assets/image (83).png differ diff --git a/.gitbook/assets/image (84).png b/.gitbook/assets/image (84).png new file mode 100644 index 0000000..d5df8c2 Binary files /dev/null and b/.gitbook/assets/image (84).png differ diff --git a/.gitbook/assets/image (85).png b/.gitbook/assets/image (85).png new file mode 100644 index 0000000..804d02d Binary files /dev/null and b/.gitbook/assets/image (85).png differ diff --git a/.gitbook/assets/image (86).png b/.gitbook/assets/image (86).png new file mode 100644 index 0000000..f2dbea5 Binary files /dev/null and b/.gitbook/assets/image (86).png differ diff --git a/.gitbook/assets/image (87).png b/.gitbook/assets/image (87).png new file mode 100644 index 0000000..c60a150 Binary files /dev/null and b/.gitbook/assets/image (87).png differ diff --git a/.gitbook/assets/image (88).png b/.gitbook/assets/image (88).png new file mode 100644 index 0000000..8cf91e2 Binary files /dev/null and b/.gitbook/assets/image (88).png differ diff --git a/.gitbook/assets/image (89).png b/.gitbook/assets/image (89).png new file mode 100644 index 0000000..0d00828 Binary files /dev/null and b/.gitbook/assets/image (89).png differ diff --git a/.gitbook/assets/image (9).png b/.gitbook/assets/image (9).png index 4de550d..6aa134f 100644 Binary files a/.gitbook/assets/image (9).png and b/.gitbook/assets/image (9).png differ diff --git a/.gitbook/assets/image (90).png b/.gitbook/assets/image (90).png new file mode 100644 index 0000000..4fcd23c Binary files /dev/null and b/.gitbook/assets/image (90).png differ diff --git a/.gitbook/assets/image.png b/.gitbook/assets/image.png index ed96fbb..f1ef14f 100644 Binary files a/.gitbook/assets/image.png and b/.gitbook/assets/image.png differ diff --git a/SUMMARY.md b/SUMMARY.md index c279cd0..185507e 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -19,6 +19,8 @@ * [📂 Intercambio archivos](sdks/intercambio-archivos/README.md) * [Métodos](sdks/intercambio-archivos/metodos.md) * [Eventos](sdks/intercambio-archivos/eventos.md) + * [Propiedades](sdks/intercambio-archivos/propiedades.md) + * [BeamPortFile](sdks/intercambio-archivos/beamportfile.md) * [📅 Calendario](sdks/calendario/README.md) * [Métodos](sdks/calendario/metodos.md) * [Eventos](sdks/calendario/eventos.md) @@ -34,6 +36,11 @@ * [Propiedades](componentes-web/webrtc/propiedades.md) * [Métodos](componentes-web/webrtc/metodos.md) * [Eventos](componentes-web/webrtc/eventos.md) +* [🗃 Fileshare](componentes-web/fileshare/README.md) + * [Slots](componentes-web/fileshare/slots.md) + * [Propiedades](componentes-web/fileshare/propiedades.md) + * [Métodos](componentes-web/fileshare/metodos.md) + * [Eventos](componentes-web/fileshare/eventos.md) ## Widgets @@ -44,14 +51,14 @@ * [🖌 Personalización](widgets/personalizacion/README.md) * [Posición del widget](widgets/personalizacion/posicion-del-widget.md) * [Burbuja personalizable](widgets/personalizacion/burbuja-personalizable.md) -* [🔗 Acciones por URL](widgets/url-triggers.md) +* [🔗 Acciones por URL](widgets/acciones-por-url.md) * [🛰 API](widgets/api/README.md) * [Introducción](widgets/api/introduccion.md) * [Variables globales](widgets/api/variables-globales.md) * [Propiedades](widgets/api/propiedades.md) * [Métodos](widgets/api/metodos.md) * [Eventos](widgets/api/eventos.md) - * [Ajustes](widgets/api/diseno.md) + * [Ajustes](widgets/api/ajustes.md) * [Forzar segmentos](widgets/api/forzar-segmentos.md) ## Seguridad diff --git a/componentes-web/fileshare/README.md b/componentes-web/fileshare/README.md new file mode 100644 index 0000000..411bf0b --- /dev/null +++ b/componentes-web/fileshare/README.md @@ -0,0 +1,38 @@ +--- +description: >- + A continuación, proveemos la documentación para nuestro componente web de + envíos de archivos. +--- + +# 🗃 Fileshare + +Este componente web permite facilitar la gestión visual de los archivos que se vayan a enviar y recibir con muy pocas líneas de código, pero sin dejar de lado la personalización con HTML, CSS y Javascript. + +Podrás usar el componente sin necesidad de modificar o añadir nada, o bien personalizar la caja de selección de archivos, comportamiento de envío, cómo adjuntar archivos y mucho más. + +Primero deberás cargar el componente en la cabecera de tu sitio web como script: + +```html + +``` + +{% hint style="warning" %} +Debes cargar el recurso antes de usar el componente ``, de lo contario será un elemento sin las propiedades y métodos. Además, debes tener cuidado con el atribute `async` o `defer`. +{% endhint %} + +Para poder personalizar este componente solo deberás definirlo en alguna parte de tú código HTML: + +```html + +``` + +Una vez que has definido el componente podrás acceder a el mediante `querySelector` o cual selector HTML con Javascript. + +```javascript +const component = document.querySelector('videsk-fileshare'); +``` + +Posteriormente podrás hacer uso de sus propiedades, slots, métodos y eventos disponibles. + + + diff --git a/componentes-web/fileshare/eventos.md b/componentes-web/fileshare/eventos.md new file mode 100644 index 0000000..91dd02d --- /dev/null +++ b/componentes-web/fileshare/eventos.md @@ -0,0 +1,2 @@ +# Eventos + diff --git a/componentes-web/fileshare/metodos.md b/componentes-web/fileshare/metodos.md new file mode 100644 index 0000000..34e6f28 --- /dev/null +++ b/componentes-web/fileshare/metodos.md @@ -0,0 +1,2 @@ +# Métodos + diff --git a/componentes-web/fileshare/propiedades.md b/componentes-web/fileshare/propiedades.md new file mode 100644 index 0000000..11b366e --- /dev/null +++ b/componentes-web/fileshare/propiedades.md @@ -0,0 +1,2 @@ +# Propiedades + diff --git a/componentes-web/fileshare/slots.md b/componentes-web/fileshare/slots.md new file mode 100644 index 0000000..34ec43f --- /dev/null +++ b/componentes-web/fileshare/slots.md @@ -0,0 +1,14 @@ +# Slots + +Los slots son espacios que contienen elementos por defecto, pero que podrás reemplazar con tus propios elementos. + +## Composición + + + + + + + + + diff --git a/componentes-web/webrtc/slots.md b/componentes-web/webrtc/slots.md index 055e8bf..268e254 100644 --- a/componentes-web/webrtc/slots.md +++ b/componentes-web/webrtc/slots.md @@ -24,7 +24,7 @@ El listado de botones accionables como compartir pantalla, micrófono, cámara, * `button-chat`: botón de chat * `button-fullscreen`: botón de pantalla completa -

Botones disponibles por defecto

+

Botones disponibles por defecto

{% hint style="info" %} Los botones de cambio de cámara y compartir pantalla automáticamente se mostrarán si la función está disponible en el navegador, de lo contrario no se mostrará. diff --git a/depuracion/devtools.md b/depuracion/devtools.md index 2f78971..d3ea163 100644 --- a/depuracion/devtools.md +++ b/depuracion/devtools.md @@ -14,6 +14,8 @@ En general nuestros productos intentan ser lo más descriptivos posibles y en su Lo primero que deberás conocer como mejor herramienta del navegador para depurar ya sea en etapa de desarrollo o producción es **Devtools** o **Inspector de Elementos**. + + ## ¿Cómo acceder a Devtools? Para acceder a él existen varias maneras y dependerá de cada navegador: @@ -27,7 +29,7 @@ Para acceder a él existen varias maneras y dependerá de cada navegador: **El clic derecho lo podrás realizar en cualquier lugar del sitio web.** {% endhint %} -![Menú emergente al hacer clic derecho en el sitio](<../.gitbook/assets/image (66).png>) +![Menú emergente al hacer clic derecho en el sitio](<../.gitbook/assets/image (87).png>) {% hint style="info" %} Si te hemos solicitado mantener abierto Devtools, por errores que nuestros sistemas de monitoreo no han logrado capturar, lee a continuación. @@ -37,15 +39,15 @@ Si necesitas caputrar información ya sea de errores de código, red, etc. te su ### Vista acoplada -![Vista acoplada](<../.gitbook/assets/image (27).png>) +![Vista acoplada](<../.gitbook/assets/image (10).png>) ### Vista desacoplada -Para acceder a la vista desacoplada deberás hacer clic en los tres puntos ![](<../.gitbook/assets/image (53).png>) ubicado en la parte superior derecha, y luego selecciona el ícono ![](<../.gitbook/assets/image (58).png>). +Para acceder a la vista desacoplada deberás hacer clic en los tres puntos ![](<../.gitbook/assets/image (73).png>) ubicado en la parte superior derecha, y luego selecciona el ícono ![](<../.gitbook/assets/image (14).png>). Luego de esto la ventana quedará completamente desacoplada y podrás minimizarla. -![Vista como ventana desacoplada](<../.gitbook/assets/image (57) (1).png>) +![Vista como ventana desacoplada](<../.gitbook/assets/image (79).png>) ## Visualizar errores @@ -55,7 +57,7 @@ La mejor forma de obtener los errores es hacer clic en la pestaña con el nombre Si nuestro equipo técnico te ha solicitado que abras Devtools o Inspector de elementos, dirígete a la sección de exportar registros de errores. {% endhint %} -![Vista de "console" con errores y advertencias](<../.gitbook/assets/image (54).png>) +![Vista de "console" con errores y advertencias](<../.gitbook/assets/image (48).png>) Existen mensajes con distintos colores de fondo, los más comunes serán rojo y amarillo, siendo errores y advertencias, respectivamente. @@ -67,7 +69,7 @@ Es probable que nuestro equipo técnico te solicite realizar una descarga de los Para ello deberás estar en la [vista Console](devtools.md#visualizar-errores) y luego en cualquier lugar de la consola (Console) haz clic derecho, para finalmente dar clic en la opción **`Save as...`**. -![Menú emergente al hacer clic derecho en console](<../.gitbook/assets/image (67).png>) +![Menú emergente al hacer clic derecho en console](<../.gitbook/assets/image (22).png>) El archivo que descarges deberás enviarlo a [support@videsk.io](mailto:support@videsk.io), con el asunto **Registros de errores**, adjuntando el archivo con registros que habitualmente se llamará **{website}-{date}.log**. diff --git a/depuracion/webrtc.md b/depuracion/webrtc.md index 24098c7..cb19c0a 100644 --- a/depuracion/webrtc.md +++ b/depuracion/webrtc.md @@ -31,17 +31,17 @@ Lee a continuación para conocer las razones por tus agentes no podrían conecta Es posible que las pruebas arrojen errores en el micrófono si este está apagado o silenciado desde tu equipo o teclado. {% endhint %} -![Error al capturar audio](<../.gitbook/assets/image (60).png>) +![Error al capturar audio](<../.gitbook/assets/image (66).png>) Como requisitos mínimo deberás contar con micrófono para unirte a las videollamadas. -![Éxito al detectar cámara](<../.gitbook/assets/image (33).png>) +![Éxito al detectar cámara](<../.gitbook/assets/image (53).png>) ### Red Para identificar problemas de red es necesario entender ciertos conceptos. -![Pruebas de red](<../.gitbook/assets/image (51).png>) +![Pruebas de red](<../.gitbook/assets/image (41).png>) `Network` consiste en pruebas propias de la red, siendo necesario disponer de al menos conexiones `UDP` o `TCP`. Si ambos tipos de protocolos de transmisión están restringidos no podrás conectar las videollamadas. @@ -49,7 +49,7 @@ Para identificar problemas de red es necesario entender ciertos conceptos. No es requerido contar con compatibilidad IPv6. {% endhint %} -![Pruebas de conexión](<../.gitbook/assets/image (59).png>) +![Pruebas de conexión](<../.gitbook/assets/image (39).png>) Para el caso de `Connectivity` serán las pruebas de conexión, donde se probará la disponibilidad de conectar desde tu red con `Relay`, es decir, servidores de retransmisión, `Reflexive` para conexión P2P fuera de la red y finalmente conexión `Host` también P2P pero dentro de la red. diff --git a/grabaciones/cloud/gcp.md b/grabaciones/cloud/gcp.md index 6ef91c2..91d53bd 100644 --- a/grabaciones/cloud/gcp.md +++ b/grabaciones/cloud/gcp.md @@ -26,7 +26,7 @@ Haz clic en **Crear**. En caso que tu interfaz esté en inglés una función corresponde a **Roles** en el menú de IAM. {% endhint %} -
+
{% hint style="info" %} Deberás usar este rol para crear las credenciales en el siguiente paso. Así aseguras que solo tendremos permisos para crear archivos, no leer o modificar. @@ -57,7 +57,7 @@ Luego deberás buscar la cuenta de servicio, dando clic en el nombre. Posteriorm Finalmente haz clic en el tipo de clave **JSON**. -

Generar clave privada

+

Generar clave privada

Como último paso deberás pegar el contenido del archivo JSON en nuestra interfaz de configuración y Probar las credenciales. @@ -65,7 +65,7 @@ Como último paso deberás pegar el contenido del archivo JSON en nuestra interf Solo puedes probar las credenciales la primera vez que las creas, luego no podrás utilizar la función. {% endhint %} -
+
## Opción 1 @@ -115,3 +115,25 @@ Clave privada otorgada a la cuenta de servicio con permiso de escritura para cre ### Client email Dirección de correo electrónico de la cuenta de servicio asociada y que cuenta con los permisos de escritura. + +## Metadata + +Una vez que la integración para sincronizar las grabaciones esté completada y correcta, se comenzarán a enviar con metadata asociada a la llamada, lo que te permitirá buscar grabaciones de una manera enriquecida. + +
+ +Por defecto, adjuntamos: + +| Clave | Valor | Descripción | +| ----------- | ------ | -------------------------------------------------------- | +| duration | Number | Duración de la grabación en minutos | +| checkSum | String | CheckSum de la grabación con SHA-1 | +| startedAt | Date | Timestamp en la que comenzó la grabación | +| endedAt | Date | Timestamp en la que finalizó la grabación | +| user | String | ID del ejecutivo | +| extension | String | Extensión del archivo, por defecto: _webm_. | +| uploadDate | Date | Fecha en la que se intentó sincronizar con cloud storage | +| recordingId | String | ID de las pistas (no llamada) | +| size | Number | Tamaño del archivo en bytes | +| identifier | String | ID de la llamada | +| contentType | String | MIME type del archivo, por defecto: _video/webm_. | diff --git a/grabaciones/cloud/tamanos-y-resolucion.md b/grabaciones/cloud/tamanos-y-resolucion.md index 7180d01..0216378 100644 --- a/grabaciones/cloud/tamanos-y-resolucion.md +++ b/grabaciones/cloud/tamanos-y-resolucion.md @@ -38,50 +38,7 @@ Recuerda que los valores de tamaño (MB) pueden variar en base a la resolución La cantidad de bits por segundo máximos es de `2,500,000` (video) y `128,000` (audio), mientras que lo mínimo es `100,000` (video) y `6,000` (audio). {% endhint %} -| Resolution (px) | Bits video (bps) | Bits audio (bps) | Codec | Size (MB) | Type | -| --------------------------------------------------- | --------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------- | --------------------------------------------------------- | -| 1280x720 | 800,000 | 128,000 | video/webm;codecs="vp8" | 7.1 | video + audio | -| 1280x720 | 2,500,000 | 128,000 | video/webm;codecs="vp8" | 19.9 | video + audio | -| 1280x720 | 100,000 | 6,000 | video/webm;codecs="vp8" | 2.9 | video + audio | -| 1280x720 | 1,250,000 | 64,000 | video/webm;codecs="vp8" | 10 | video + audio | -| 1280x720 | 800,000 | 128,000 | video/webm;codecs="vp9" | 7.3 | video + audio | -| 1280x720 | 2,500,000 | 128,000 | video/webm;codecs="vp9" | 16.6 | video + audio | -| 1280x720 | 1,250,000 | 64,000 | video/webm;codecs="vp9" | 10 | video + audio | -| 1280x720 | 100,000 | 6,000 | video/webm;codecs="vp9" | 0.9792 | video + audio | -| 1080x720 | 2,500,000 | 128,000 | video/webm;codecs="vp9" | 16.2 | video + audio | -| 1080x720 | 800,000 | 128,000 | video/webm;codecs="vp9" | 7.4 | video + audio | -| 1080x720 | 1,250,000 | 64,000 | video/webm;codecs="vp9" | 9.8 | video + audio | -| 1080x720 | 100,000 | 6,000 | video/webm;codecs="vp9" | 0.9813 | video + audio | -| 1080x720 | 2,500,000 | 128,000 | video/webm;codecs="vp8" | 19.9 | video + audio | -| 1080x720 | 800,000 | 128,000 | video/webm;codecs="vp8" | 7.1 | video + audio | -| 1080x720 | 1,250,000 | 64,000 | video/webm;codecs="vp8" | 10 | video + audio | -| 1080x720 | 100,000 | 6,000 | video/webm;codecs="vp8" | 2.6 | video + audio | -| 640x480 | 2,500,000 | 128,000 | video/webm;codecs="vp9" | 14.4 | video + audio | -| 640x480 | 800,000 | 128,000 | video/webm;codecs="vp9" | 6.6 | video + audio | -| 640x480 | 1,250,000 | 64,000 | video/webm;codecs="vp9" | 8.2 | video + audio | -| 640x480 | 100,000 | 6,000 | video/webm;codecs="vp9" | 0.9313 | video + audio | -| 640x480 | 2,500,000 | 128,000 | video/webm;codecs="vp8" | 19.9 | video + audio | -| 640x480 | 800,000 | 128,000 | video/webm;codecs="vp8" | 7 | video + audio | -| 640x480 | 1,250,000 | 64,000 | video/webm;codecs="vp8" | 10 | video + audio | -| 640x480 | 100,000 | 6,000 | video/webm;codecs="vp8" | 1.3 | video + audio | -| 320x240 | 2,500,000 | 128,000 | video/webm;codecs="vp9" | 12.9 | video + audio | -| 320x240 | 800,000 | 128,000 | video/webm;codecs="vp9" | 5.6 | video + audio | -| 320x240 | 1,250,000 | 64,000 | video/webm;codecs="vp9" | 7 | video + audio | -| 320x240 | 100,000 | 6,000 | video/webm;codecs="vp9" | 0.8735 | video + audio | -| 320x240 | 2,500,000 | 128,000 | video/webm;codecs="vp8" | 19.7 | video + audio | -| 320x240 | 800,000 | 128,000 | video/webm;codecs="vp8" | 7 | video + audio | -| 320x240 | 1,250,000 | 64,000 | video/webm;codecs="vp8" | 10 | video + audio | -| 320x240 | 100,000 | 6,000 | video/webm;codecs="vp8" | 0.8167 | video + audio | -| 160x120 | 2,500,000 | 128,000 | video/webm;codecs="vp9" | 12.9 | video + audio | -| 160x120 | 800,000 | 128,000 | video/webm;codecs="vp9" | 5.6 | video + audio | -| 160x120 | 1,250,000 | 64,000 | video/webm;codecs="vp9" | 7.1 | video + audio | -| 160x120 | 100,000 | 6,000 | video/webm;codecs="vp9" | 0.636 | video + audio | -| 160x120 | 2,500,000 | 128,000 | video/webm;codecs="vp8" | 14.3 | video + audio | -| 160x120 | 800,000 | 128,000 | video/webm;codecs="vp8" | 7 | video + audio | -| 160x120 | 1,250,000 | 64,000 | video/webm;codecs="vp8" | 9.9 | video + audio | -| 160x120 | 100,000 | 6,000 | video/webm;codecs="vp8" | 0.8213 | video + audio | -| 160x120 | 100,000 | 25,000 | video/webm;codecs="vp9" | 0.9992 | video + audio | -| 640x480 | 100,000 | 25,000 | video/webm;codecs="vp9" | 1.1 | video + audio | +
Resolution (px)Bits video (bps)Bits audio (bps)CodecSize (MB)Type
1280x720800,000128,000video/webm;codecs="vp8"7.1video + audio
1280x7202,500,000128,000video/webm;codecs="vp8"19.9video + audio
1280x720100,0006,000video/webm;codecs="vp8"2.9video + audio
1280x7201,250,00064,000video/webm;codecs="vp8"10video + audio
1280x720800,000128,000video/webm;codecs="vp9"7.3video + audio
1280x7202,500,000128,000video/webm;codecs="vp9"16.6video + audio
1280x7201,250,00064,000video/webm;codecs="vp9"10video + audio
1280x720100,0006,000video/webm;codecs="vp9"0.9792video + audio
1080x7202,500,000128,000video/webm;codecs="vp9"16.2video + audio
1080x720800,000128,000video/webm;codecs="vp9"7.4video + audio
1080x7201,250,00064,000video/webm;codecs="vp9"9.8video + audio
1080x720100,0006,000video/webm;codecs="vp9"0.9813video + audio
1080x7202,500,000128,000video/webm;codecs="vp8"19.9video + audio
1080x720800,000128,000video/webm;codecs="vp8"7.1video + audio
1080x7201,250,00064,000video/webm;codecs="vp8"10video + audio
1080x720100,0006,000video/webm;codecs="vp8"2.6video + audio
640x4802,500,000128,000video/webm;codecs="vp9"14.4video + audio
640x480800,000128,000video/webm;codecs="vp9"6.6video + audio
640x4801,250,00064,000video/webm;codecs="vp9"8.2video + audio
640x480100,0006,000video/webm;codecs="vp9"0.9313video + audio
640x4802,500,000128,000video/webm;codecs="vp8"19.9video + audio
640x480800,000128,000video/webm;codecs="vp8"7video + audio
640x4801,250,00064,000video/webm;codecs="vp8"10video + audio
640x480100,0006,000video/webm;codecs="vp8"1.3video + audio
320x2402,500,000128,000video/webm;codecs="vp9"12.9video + audio
320x240800,000128,000video/webm;codecs="vp9"5.6video + audio
320x2401,250,00064,000video/webm;codecs="vp9"7video + audio
320x240100,0006,000video/webm;codecs="vp9"0.8735video + audio
320x2402,500,000128,000video/webm;codecs="vp8"19.7video + audio
320x240800,000128,000video/webm;codecs="vp8"7video + audio
320x2401,250,00064,000video/webm;codecs="vp8"10video + audio
320x240100,0006,000video/webm;codecs="vp8"0.8167video + audio
160x1202,500,000128,000video/webm;codecs="vp9"12.9video + audio
160x120800,000128,000video/webm;codecs="vp9"5.6video + audio
160x1201,250,00064,000video/webm;codecs="vp9"7.1video + audio
160x120100,0006,000video/webm;codecs="vp9"0.636video + audio
160x1202,500,000128,000video/webm;codecs="vp8"14.3video + audio
160x120800,000128,000video/webm;codecs="vp8"7video + audio
160x1201,250,00064,000video/webm;codecs="vp8"9.9video + audio
160x120100,0006,000video/webm;codecs="vp8"0.8213video + audio
160x120100,00025,000video/webm;codecs="vp9"0.9992video + audio
640x480100,00025,000video/webm;codecs="vp9"1.1video + audio
{% hint style="danger" %} La información en este documento es de propiedad de Videsk. Sin la autorización explícita para uso, copia o distribución en sitios o documentos externos a Videsk conlleva una violación de derechos de autor punible legalmente. diff --git a/grabaciones/local/google-drive-filestream.md b/grabaciones/local/google-drive-filestream.md index 3b86e32..a9a4276 100644 --- a/grabaciones/local/google-drive-filestream.md +++ b/grabaciones/local/google-drive-filestream.md @@ -26,19 +26,19 @@ Deberás ingresar a la página de soporte de Google Drive acá: Siga los pasos de instalación para Windows o Mac. -![Vista de instalación en Windows](<../../.gitbook/assets/image (32).png>) +![Vista de instalación en Windows](<../../.gitbook/assets/image (25).png>) ### 3. Configure sus preferencias Selecciones las casillas sobre sus preferencias respecto a crear un acceso directo de File Stream en el escritorio de su ordenador y sobre añadir accesos directos de Documentos, Hojas e cálculo y presentaciones de Google. -![Vista de preferencias](<../../.gitbook/assets/image (23).png>) +![Vista de preferencias](<../../.gitbook/assets/image (72).png>) ### 4. Instalación Continúe con la instalación hasta ver el siguiente mensaje: -![Vista de instalación finalizada](<../../.gitbook/assets/image (31).png>) +![Vista de instalación finalizada](<../../.gitbook/assets/image (51).png>) Una vez que haya finalizado la instalación deberás configurar la carpeta descarga del navegador a utilizar. diff --git a/sdks/cancelacion-de-ruido/README.md b/sdks/cancelacion-de-ruido/README.md index 4a37b66..c430d0c 100644 --- a/sdks/cancelacion-de-ruido/README.md +++ b/sdks/cancelacion-de-ruido/README.md @@ -24,7 +24,7 @@ El ruido ambiente ideal debe oscilar entre menor o igual a 90 db (decibelios). Como referencia puedes usar esta tabla: -

Fuente: https://es.wikipedia.org/wiki/Decibelio

+

Fuente: https://es.wikipedia.org/wiki/Decibelio

## Uso diff --git a/sdks/intercambio-archivos/README.md b/sdks/intercambio-archivos/README.md index 2cb2b6d..57a97ae 100644 --- a/sdks/intercambio-archivos/README.md +++ b/sdks/intercambio-archivos/README.md @@ -4,14 +4,10 @@ description: Te explicamos cómo usar nuestro SDK de intercambio de archivos. # 📂 Intercambio archivos -La documentación y recursos necesarios para utilizar FileShare SDK está estrictamente restringido para uso de clientes de Videsk. Nos reservamos el derecho de restringir su acceso y uso, si detectamos un uso inadecuado. - -Este SDK te permite utilizar la función de intercambio de archivos de forma sencilla, pero te permite definir tu propia interfaz o flujos. - -El sistema de intercambio de archivos opera como una bandeja de envío, que posee a su vez una lista de archivos por enviar o ya enviados. +`BeamPort` te permite intercambiar de archivos de forma sencilla, permitiendo definir tu propia interfaz o flujos. {% hint style="warning" %} -Esta función es activada por el agente manualmente, debes escuchar los eventos antes de comenzar a enviar archivos. +La documentación y recursos necesarios para utilizar `BeamPort` está estrictamente restringido para uso de clientes de Videsk. Nos reservamos el derecho de restringir su acceso y uso, si detectamos un uso inadecuado. {% endhint %} ## Instalación @@ -21,122 +17,58 @@ Para utilizar el intercambio de archivo necesitas cargar: {% tabs %} {% tab title="HTML" %} ```html - + ``` {% endtab %} {% tab title="Javascript" %} ```javascript const script = document.createElement('script'); -script.src = "https://cdn.videsk.io/sdk/filesharing.min.js"; +script.src = "https://cdn.videsk.io/sdk/beamport.min.js"; script.setAttribute('async', true); document.appendChild(script); ``` {% endtab %} {% endtabs %} -Este SDK **no** requiere de una instancia manual, es decir, `new FileSharing()`. Actualmente, debes utilizarlo en conjunto con nuestro otro [SDK Phone](../phone/). - -Esto lo podrás hacer usando un método llamado `addExtension`, la cual permite añadir extensiones o características extras. - -```javascript -const phone new Phone(); -phone.addExtension({ name: 'fileshare', extension: FileShare }); -``` - -En el caso de la clave (key) `extension`, corresponde a la clase `FileShare`. Por lo tanto, debes cargar el `script` desde nuestro CDN previamente a este código para poder referenciarlo. - -Una vez que hagas esto, automáticamente [Phone](../phone/) SDK se hará cargo del intercambio a nivel de red y deberás escuchar los diferentes eventos. +## Instanciación -## Instancia FileShare - -Para obtener acceso a la instancia `FileShare` deberás usar el método `extensionGetModule`. +Para comenazar deberás instanciar un nuevo `BeamPort`. ```javascript -const fileshare = phone.extensionGetModule('fileshare'); +const port = new BeamPort(); ``` -Esto devuelve una instancia de la clase `FileShare` con sus métodos y propiedades. - -## Listado de archivos - -Para acceder al listado de archivos debes usar la propiedad `queue`. - -```javascript -const fileshare = phone.extensionGetModule('fileshare'); -const files = fileshare.queue; -``` - -Para obtener un listado actualizado puedes usar los eventos usando la propiedad de la instancia `fileshare.queue`. - -## Anatomía de archivos - -Los archivos que se envíen mediante el SDK serán añadidos a un `queue` el cual corresponde a un `Array`. +{% hint style="warning" %} +Debes crear solo 1 `BeamPort` por cada llamada, de lo contrario el comportamiento no será el esperado. +{% endhint %} -```javascript -fileshare.queue -// output -[{...}] -``` +A continuación, se describe el flujo para la creación de una instancia `BeamPort`, considerando que inicialmente se desencadena desde el lado del agente enviando una solicitud de conexión a través de [`Phone SDK`](../phone/). -Cada elemento dentro de este `Array` es un `Object`, que está compuesto de: +```mermaid +sequenceDiagram + participant User as BeamPort Customer + participant Phone as Phone + participant Agent as BeamPort Agent -```javascript -{ - buffer: ArrayBuffer, - endedAt: Number, - id: String, - meta: Object, - progress: Number, - received: Number, - size: Number, - startedAt: Number, - status: String -} + Agent ->> Phone: Send "beamport:activated" event + Phone ->> User: Send accessToken + User -->> User: Create instance + User ->> Agent: Establish direct bidirectional connection ``` -#### `buffer` - -Corresponde al Buffer en memoria del archivo a enviar o recibido. Debes convertir este ArrayBuffer en el tipo de dato que necesites. Más información sobre ArrayBuffer acá. - -#### `endedAt` - -Corresponde a la fecha de término en el intercambio de archivos como `timestamp`. - -#### `startedAt` - -Corresponde a la fecha de inicio en el intercambio de archivos como `timestamp`. - -#### `id` - -Corresponde al id del archivo intercambiado. - -#### `meta` - -Corresponde a los meta datos del archivo a enviar o enviado, como un `Object`. Esta compuesto por `name` y `type`, siendo el nombre del archivo y tipo (MIME) respectivamente. - -#### `progress` - -Corresponde al total porcentual intercambiado desde 0 a 100. - -#### `received` - -Corresponde al tamaño en bytes recibidos. - -#### `size` - -Corresponde al tamaño del archivo a enviar o recibido. - -#### `status` +## Consideraciones -Corresponde al estado del archivo a enviar o recibido, el cual puede ser `queued`, `canceled`, `sending`, `receiving`, `completed`. +1. Utilizamos como identificación el contenido del archivo calculando un CRC-32, por lo que no se enviarán dos archivos idénticos en bytes. +2. Posee un algorítmo de envío por trozos (chunks) para balanceo de red. +3. Cada envío verifica la integridad del archivo mediante CRC-32 chunking. +4. Se verifica la integridad cada trozo recibido con el par remoto, de lo contrario se reintenta. +5. El límite del tamaño del archivo está dado por la memoria del dispositivo emisor y receptor. Recomendamos enviar archivos no superiores a 2GB. +6. El envío finaliza cuando el cálculo de CRC-32 es equivalente al del par emisor. +7. `BeamPort` realizará reconexiones automáticas cuando existan desconexiones por red. -{% content-ref url="metodos.md" %} -[metodos.md](metodos.md) -{% endcontent-ref %} +Para enviar archivos deberás conocer más de los métodos, eventos y propiedades de `BeamPort`: -{% content-ref url="eventos.md" %} -[eventos.md](eventos.md) -{% endcontent-ref %} +
MétodosConoce cuáles y cómo usar los métodos de BeamPort.
EventosConoce cuáles y cómo usar los eventos de BeamPort.
PropiedadesConoce cuáles son las propiedades de un BeamPort.
diff --git a/sdks/intercambio-archivos/beamportfile.md b/sdks/intercambio-archivos/beamportfile.md new file mode 100644 index 0000000..b573703 --- /dev/null +++ b/sdks/intercambio-archivos/beamportfile.md @@ -0,0 +1,59 @@ +# BeamPortFile + +`BeamPortFile` es un tipo de constructor diseñado para crear una instancia de archivo personalizada al constructor nativo [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File/File), que inicio con 0 bytes pero puede mutar su buffer durante el tiempo. + +## Propiedades + +### `filename` + +Esta propiedad corresponde al nombre del archivo, incluye extensión. + +### `crc32` + +Esta propiedad corresponde a la integridad de un archivo como cálculo de un número de 4 bytes. + +### `size` + +Esta propiedad entrega el valor del archivo en bytes. + +### `mimeType` + +Esta propiedad indica el [tipo MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics\_of\_HTTP/MIME\_types) del archivo. + +### `data` + +Esta propiedad es un `Array` de `ArrayBuffer`, es decir, el listado de chunks como buffer. + +### `buffered` + +Esta propiedad indica la cantidad de datos añadidos en buffer mientras se reciben los chunks. + +### `percentage` + +Esta propiedad indica el porcentaje del archivo en buffer, de 0 a 100, durante la recepción usando el método [`add`](beamportfile.md#add). Esta propiedad se basa en [`buffered`](beamportfile.md#buffered). + +## Métodos + +### `add` + +Este método permite añadir chunks de `ArrayBuffer` al buffer. + +```javascript +beamPortFile.add(chunk); +``` + +### `arrayBuffer` + +Este método asíncrono permite convertir el archivo a un `ArrayBuffer` como valor de salida. + +```javascript +await beamPortFile.arrayBuffer(); +``` + +### `blob` + +Este método permite convertir el archivo en un `Blob` como valor de salida. + +```javascript +beamPortFile.blob(); +``` diff --git a/sdks/intercambio-archivos/eventos.md b/sdks/intercambio-archivos/eventos.md index 7ac8a97..5508f84 100644 --- a/sdks/intercambio-archivos/eventos.md +++ b/sdks/intercambio-archivos/eventos.md @@ -1,86 +1,157 @@ # Eventos -Los siguientes eventos te permiten escuchar diferentes estados al momento de intercambiar archivos. +## `connected` -Los siguientes eventos los deberás escuchar desde la instancia de [Phone](../phone/) SDK, **no** desde una instancia de `FileShare`, esto debido a que se hará cargo de emitir eventos cuando sea necesario. +Este evento se dispara cuando se ha conectado `BeamPort` a nuestra API WebSocket. -{% embed url="https://www.figma.com/file/2i9FRajfNU50zYjcNC3Tmu/Fileshare-Events-Flow?node-id=0%3A1" %} - -## `fileshare-ready` - -Este evento se emite cuando la conexión de alta velocidad esta completada y lista para transferir archivos. +{% hint style="warning" %} +Esto **no significa que esté listo para enviar archivos**, por lo que siempre deberás verificar que `BeamPort.ports` tenga un valor mayor a cero antes de usar el método [`send`](metodos.md#send). +{% endhint %} ```javascript -phone.addEventListener('fileshare-ready', () => { - const fileshare = phone.extensionGetModule('fileshare'); - // Do something +port.addEventListener('connected', () => { + console.log('Listo para transferir?', port.ports > 0); }); ``` -## `fileshare-closed` +## `disconnected` + +Este evento se dispara cuando `BeamPort` se ha desconectado de nuestra API WebSocket, lo que es equivalente a perder conexión con los pares `BeamPort`. -Este evento se emite cuando la conexión de alta velocidad se cierra producto de problemas de red. +{% hint style="info" %} +No requiere una reconexión manual, ya que `BeamPort` intentará reconectarse automáticamente solo si no se ha desconectado usando el método [`disconnect`](metodos.md#disconnect). +{% endhint %} ```javascript -phone.addEventListener('fileshare-closed', () => { +port.addEventListener('disconnected', () => { // Do something }); ``` -## `fileshare-canceled` +## `user:disconnected` -Este evento se emite cuando un archivo que esta en progreso de envío se cancela antes de completarse o ha fallado en el transporte. +Este evento se dispara cuando un par `BeamPort` se desconecta, no así la conexión local. ```javascript -phone.addEventListener('fileshare-canceled', () => { - // Do something +port.addEventListener('user:disconnected', () => { + console.log('Ports conectados', port.ports); }); ``` -## `fileshare-new-file` +## `ports` -Este evento se emite cuando se adjunta un nuevo archivo, pero aún no ha sido enviado. +Este evento se dispara cuando un nuevo par `BeamPort` se ha conectado. ```javascript -phone.addEventListener('fileshare-new-file', event => { - const { side, data } = event.detail; - // Do something +port.addEventListener('ports', () => { + console.log('Ports conectados', port.ports); }); ``` +## `description` + +Este evento se dispara cuando se recibe la información de un nuevo archivo que se enviará a continuación. En valor a recibir es un [`BeamPortFile`](beamportfile.md). + {% hint style="info" %} -Este evento se emitará por cada archivo añadido o a enviar. +Considera que el contenido en bytes es 0, ya que aún no se ha recibido información. {% endhint %} -## `fileshare-file-removed` +```javascript +port.addEventListener('description', event => { + const file = event.detail; +}); +``` + +## `attached` + +Este evento se dispara cuando se llama al método [`send`](metodos.md#send). + +```javascript +port.addEventListener('attached', event => { + const { crc32 } = event.detail; +}); +``` + +## `progress` + +Este evento se dispara cuando se está transfieren bytes del archivo durante el envío o recepción. + +En el caso de **envío** recibirás en `event.detail` un `Object` con: + +* `percentage`: porcentaje como `Number` del envío. +* `crc32`: CRC-32 del chunk envíado, **no del archivo**. -Este evento se emite cuando un archivo adjunto pero no enviado, se elimina de la bandeja de envió. +Para el caso de [**recepción**](#user-content-fn-1)[^1] recibirás en `event.detail` un [`BeamPortFile`](beamportfile.md). ```javascript -phone.addEventListener('fileshare-file-removed', event => { - const { fileId } = event.detail; +port.addEventListener('progress', event => { + const data = event.detail; + // Envío: { percentage: Number, crc32: Number } + // Recepción: BeamPortFile +}); +``` + +## `canceled` + +Este evento se dispara cuando un archivo se ha cancelado[^2], ya sea durante o después del envío/recepción. + +```javascript +port.addEventListener('canceled', event => { + const { crc32 } = event.detail; // Do something }); ``` -## `fileshare-completed` +## `received` + +Este evento se dispara cuando se recibe un archivo [**en su totalidad**](#user-content-fn-3)[^3] envíado por el par remoto. El valor recibido corresponde a un [`BeamPortFile`](beamportfile.md). + +```javascript +port.addEventListener('received', event => { + const file = event.detail; +}); +``` + +## `state` -Este evento se emite cuando un archivo en proceso de envío se ha completo exitosamente. +Este evento se dispara cuando se recibe un estado del archivo que se está enviando. Los valores son: + +* `state`: corresponde al valor de alguna de las propiedades estáticas de `BeamPort`. +* `crc32`: valor de integridad total del archivo. + +```javascript +port.addEventListener('state', event => { + const { state, crc32 } = event.detail; +}); +``` + +## `state:*:*` + +Este evento con nombre dinámico se dispara cuando se ha recibido información del estado del archivo, ya sea durante o después del envío. + +Este evento se debe construir junto con los eventos [`description`](eventos.md#description) o [`attached`](eventos.md#attached), y las [propiedades estáticas de `BeamPort`](propiedades.md#propiedades-estaticas). ```javascript -phone.addEventListener('fileshare-completed', event => { - const { queueIndex, status } = event.detail; +port.addEventListener(`state:${BeamPort.DELETED}:${crc32}`, () => { // Do something }); ``` -## `fileshare-progress` +## `state:*:*:*` + +Este evento con nombre dinámico se dispara cuando se recibido la información del estado de un chunk del archivo mientras se envía. -Este evento se emite cuando se está en proceso de envío de un archivo, indicando su progreso. +Este evento se debe construir junto con el evento [`progress`](eventos.md#progress), y las [propiedades estáticas de `BeamPort`](propiedades.md#propiedades-estaticas). ```javascript -phone.addEventListener('fileshare-progress', event => { - const { fileId, progress } = event.detail; +const eventName = `state:${BeamPort.RECEIVED}:${crc32File}:${crc32Chunk}`; +port.addEventListener(eventName, () => { // Do something }); ``` + +[^1]: + +[^2]: Ya sea cancelado local o remotamente. + +[^3]: Ya se han recibido todos los bytes del archivo. El porcentaje será 100%. diff --git a/sdks/intercambio-archivos/metodos.md b/sdks/intercambio-archivos/metodos.md index 1aa602a..e82beb2 100644 --- a/sdks/intercambio-archivos/metodos.md +++ b/sdks/intercambio-archivos/metodos.md @@ -1,73 +1,89 @@ # Métodos -Los siguientes métodos te permiten acceder a funciones que cambiarán el comportamiento o ayudantes para ciertas acciones. +## `connect` -Para usar los siguientes métodos debes usar la instancia generada por [Phone](../phone/) SDK. +Debes usar este método[^1] asíncrono para realizar la conexión con otro par `BeamPort`, entregando un `accessToken` que podrás obtener desde el evento `beamport:connect` de `Phone SDK`. ```javascript -const fileshare = phone.extensionGetModule('fileshare'); +await port.connect(accessToken); ``` -## `add` +## `send` + +Este método asíncrono te permite enviar los archivos automáticamente al otro par `BeamPort`. Los argumentos que recibe este método son: -Este método permite adjuntar archivos a la lista, pero no se enviaránc hasta usar el método `send`. Para obtener este archivo debes hacer uso de un elemento DOM de tipo `file` y el archivo a +1. `input`: Archivo como `File`, `ArrayBuffer` o `Blob`. +2. `mimeType`: MIME del archivo, opcional si `input` es de tipo `File`. +3. `id`: ID del archivo, opcional. ```javascript -fileshare.add(file); +// File +await port.send(myFile); +// ArrayBuffer o Blob +await port.send(myBuffer, 'application/msword'); ``` -El tipo de elemento DOM HTML es el siguiente (ejemplo): +Recomendamos el uso de nuestro componente web de transferencia de archivos, o bien [puedes usar un `input` de tipo `file`, escuchando el evento `change`](#user-content-fn-2)[^2]. -{% hint style="info" %} -Puedes pasar como argumento un único archivo o como lista `FileList`. -{% endhint %} +#### Consideraciones método `send` -```html - -``` +En caso que desees adjuntar varios archivos deberás ejecutar una iteración sobre los archivos: -La documentación oficial de `input` file [está aquí](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). - -## `send` +```javascript +files.forEach(file => port.send(file)); +``` -Este método permite enviar los archivos que estén en el listado de archivos, pero no han sido enviados. +En el caso que envíes un `ArrayBuffer` o `Blob`, deberás indicar de manera obligatoria el `id` y `mimeType`. ```javascript -fileshare.send(); +await port.send(myBlob, 'my-unique-id', 'image/png'); ``` +{% hint style="warning" %} +Si **no** indicas un MIME type para un archivo como `ArrayBuffer` o `Blob` , no será legible para el agente. +{% endhint %} + ## `cancel` -Este método permite cancelar el envío de archivos en curso. +Este método permite cancelar el envío del archivo en curso o eliminar el acceso del archivo en el par `BeamPort` remoto. -{% hint style="info" %} -Esto cancelará todos los archivos en curso de envío, no es posible cancelar individualmente -{% endhint %} +Deberás entregar como único argumento el mismo archivo envíado como `File`, `ArrayBuffer` o `Blob`. ```javascript -fileshare.cancel(); +await port.cancel(myFile); ``` -## `download` +## `disconnect` -Este método permite descargar un archivo en particular al dispositivo. Para ello debes proporcionar el id del archivo, el cual podrás encontrar en el listado `fileshare.queue`. +Con este método detendrás la conexión BeamPort en su totalidad, por lo deberás crear una nueva si lo necesitas. ```javascript -fileshare.download(fileId); +port.disconnect(); ``` -## `remove` +## `addEventListener` -Este método permite eliminar un archivo que aún no se ha enviado o no se está enviando. Para ello debes proporcionar el id del archivo, el cual podrás encontrar en el listado `fileshare.queue`. +Podrás escuchar los eventos a través de un oyente adjunto. Puedes añadir todos los eventos que necesites para el mismo o diferente. ```javascript -fileshare.remove(fileId); +port.addEventListener('eventName', event => { + const eventData = event.detail; + // Do something +}); ``` -## `find` +## `getFile` -Este método puedes buscar fácilmente el archivo el cual retorna un valor como `Object`. El único argumento que debes proporcionar el id del archivo. +Con este método podrás obtener el archivo usando el valor CRC-32 como único argumento y `String`. El valor retornado será un `BeamPortFile`. ```javascript -fileshare.find(fileId); +port.getFile(crc32); ``` + +{% hint style="info" %} +`BeamPort` **no** almacena los archivos enviados, solo recibidos. Puedes obtener el listado de archivos recibidos desde la propiedad `store`. +{% endhint %} + +[^1]: Este método es asíncrono + +[^2]: [https://developer.mozilla.org/en-US/docs/Web/API/File\_API/Using\_files\_from\_web\_applications](https://developer.mozilla.org/en-US/docs/Web/API/File\_API/Using\_files\_from\_web\_applications) diff --git a/sdks/intercambio-archivos/propiedades.md b/sdks/intercambio-archivos/propiedades.md new file mode 100644 index 0000000..afbb034 --- /dev/null +++ b/sdks/intercambio-archivos/propiedades.md @@ -0,0 +1,93 @@ +# Propiedades + +## `store` + +Esta propiedad contiene el listado de archivos recibidos. Corresponde a un `Map`, por lo tanto podrás acceder a cada archivo con las [propiedades nativas de un constructor Map](#user-content-fn-1)[^1]. + +La tienda está construída con clave de `CRC-32` y como valor [`BeamPortFile`](beamportfile.md). + +```javascript +port.store; // Map {} +// Listado de archivos +port.store.get(crc32); // Retorna un BeamPortFile +``` + +## `connected` + +Esta propiedad devuelve un `Boolean` sobre estado de conexión. + +```javascript +port.connected; // true o false +``` + +## `ports` + +Esta propiedad devuelve la cantidad de pares `BeamPort` conectados como número entero. Habitualmente el valor siempre será `1`. + +```javascript +port.ports; +``` + +## `connection` + +Esta propiedad retorna la conexión de par activa como [`RTCDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel). + +``` +port.connection; +``` + +{% hint style="info" %} +Sugerimos no utilizar la conexión para enviar datos sin conocimiento, ya que se envían en una nomenclatura binaria propietaria. +{% endhint %} + +## `debug` + +Esta propiedad retorna el acceso al modo debugger propietario. Para hacer uso del debugger deberás definir en `localStorage` la clave `debug` con el valor en `beamport`. + +```javascript +localStorage.debug = 'beamport'; +``` + +{% hint style="info" %} +Recuerda que activar el modo debug es ineficiente para entornos productivos. +{% endhint %} + +## Propiedades estáticas + +Todas las propiedades estáticas se pueden acceder directamente desde el constructor `BeamPort`, sin necesidad de instanciar. + +```javascript +BeamPort.DESCRIPTION +BeamPort.RECEIVED +BeamPort.FAILED +``` + +### `DESCRIPTION` + +Su valor es igual al número `1`. + +### `CHUNK` + +Su valor es igual al número `2`. + +### `STATE` + +Su valor es igual al número `3`. + +### `EXCHANGED` + +Su valor es igual al número `4`. + +### `RECEIVED` + +Su valor es igual al número `5`. + +### `FAILED` + +Su valor es igual al número `6`. + +### `DELETED` + +Su valor es igual al número `7`. + +[^1]: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Map) diff --git a/webhooks/errores.md b/webhooks/errores.md index ec73b29..1baa167 100644 --- a/webhooks/errores.md +++ b/webhooks/errores.md @@ -30,7 +30,7 @@ Para el caso de errores de formato en el webhook, automáticamente capturaremos Los errores capturados durante el proceso de envío contienen una estructura que podrás visualizar de forma sencilla. -![Estructura de un error](<../.gitbook/assets/image (56).png>) +![Estructura de un error](<../.gitbook/assets/image (19).png>) Por defecto podrás ver los siguientes datos, los cuales describiremos a continuación. diff --git a/webhooks/integraciones/power-bi.md b/webhooks/integraciones/power-bi.md index 703bfff..5716805 100644 --- a/webhooks/integraciones/power-bi.md +++ b/webhooks/integraciones/power-bi.md @@ -28,19 +28,19 @@ Para realizar la conexión utilizaremos la API de Power BI llamada [Real-time st Debes ir al menú lateral, seleccionar **Examinar > Recientes**, y luego selecciona el espacio de trabajo que desees añadir el conjunto de datos. -![](<../../.gitbook/assets/image (12) (1).png>) +![](<../../.gitbook/assets/image (71).png>) Luego en tu espacio de trabajo deberás dar clic en Nuevo y seleccionar la opción **Conjunto de datos de streaming**. -![](<../../.gitbook/assets/image (17).png>) +![](<../../.gitbook/assets/image (44).png>) Posteriormente, se desplegará un menú lateral derecho, donde deberás selecciona la opción **API** y dar clic en el botón siguiente ubicado en la parte inferior. -![](<../../.gitbook/assets/image (45).png>) +![](<../../.gitbook/assets/image (13).png>) A continuación, te mostrará un formulario el cual deberemos rellenar con los datos que necesitamos exportar. Ingresaremos un nombre de referencia el cual puede ser el que tú quieras. -![](<../../.gitbook/assets/image (30).png>) +![](<../../.gitbook/assets/image (74).png>) ## 2. Modelo de datos @@ -48,11 +48,11 @@ Para cargar los datos de forma automática en PowerBI es necesario que indiquemo Para ello dejaremos abierto PowerBI unos minutos, abriremos una nueva pestaña y deberás acceder a tu cuenta dashboard ([clic aquí](https://app.videsk.io)), luego seleccionar en el menú la opción de **Webhooks**. -![](<../../.gitbook/assets/image (63).png>) +![](<../../.gitbook/assets/image (6).png>) -Ya en Webhooks deberás dar clic en el botón azul ![](<../../.gitbook/assets/image (26) (1).png>)ubicado en la parte superior derecha. Posteriormente, deberás seleccionar la opción **Personalizado**. +Ya en Webhooks deberás dar clic en el botón azul ![](<../../.gitbook/assets/image (60).png>)ubicado en la parte superior derecha. Posteriormente, deberás seleccionar la opción **Personalizado**. -![](<../../.gitbook/assets/image (40).png>) +![](<../../.gitbook/assets/image (62).png>) Luego, deberás seleccionar qué tipo de evento quieres enviar a PowerBI. @@ -60,7 +60,7 @@ Luego, deberás seleccionar qué tipo de evento quieres enviar a PowerBI. **Para este ejemplo utilizaremos los datos del evento de llamada creada,** pero recuerda que las instrucciones aplican para cualquier otro evento**.** {% endhint %} -![](<../../.gitbook/assets/image (35).png>) +![](<../../.gitbook/assets/image (47).png>) Luego de dar clic en el evento ingresarás al editor Webhook. @@ -72,7 +72,7 @@ Ya en el editor irás al menú lateral derecho, en la parte superior encontrará Los datos que puedes observar son completamente aleatorios y no son asociados a tus clientes o negocio. {% endhint %} -![](<../../.gitbook/assets/image (19).png>) +![](<../../.gitbook/assets/image (32).png>) {% hint style="info" %} Te sugerimos hacer un listado con los datos que quieres cargar en PowerBI. @@ -110,7 +110,7 @@ Deberías obtener una estructura de valores de transmisión similar a esto: ] ``` -![](<../../.gitbook/assets/image (14).png>) +![](<../../.gitbook/assets/image (68).png>) {% hint style="warning" %} Los nombres de valor son sensibles a mayúsculas, minúsculas, espacios, caracteres especiales, etc. @@ -122,7 +122,7 @@ Recuerda seleccionar correctamente el tipo de valor, de lo contrario los datos p Deberás activar la opción de **Análisis de historial de datos**. La cual permite almacenar los datos que enviemos generando un historial de datos. -![](<../../.gitbook/assets/image (2) (1).png>) +![](<../../.gitbook/assets/image (7).png>) Para finalizar das clic en el botón **Crear**. Posteriormente, nos mostrará datos de integración que usaremos en Videsk. @@ -132,15 +132,15 @@ Ya con los datos de integración que nos proporciona PowerBI, iremos a la config * Copia la URL de inserción de PowerBI, y pégala en el campo Método y URL. -![](<../../.gitbook/assets/image (34).png>) +![](<../../.gitbook/assets/image (24).png>) -![](<../../.gitbook/assets/image (11).png>) +![](<../../.gitbook/assets/image (21).png>) * Copia el contenido **Raw** de PowerBI y pégalo en el editor de código de Webhook que se encuentra al final del editor. -![](<../../.gitbook/assets/image (39).png>) +![](<../../.gitbook/assets/image (64).png>) -![](<../../.gitbook/assets/image (8) (1).png>) +![](<../../.gitbook/assets/image (63).png>) Ahora falta el último y más importante paso que corresponde a extraer los datos dinámicos mediante nuestro lenguaje de marcado. @@ -173,7 +173,7 @@ En este ejemplo solo estaremos utilizando 6 tipos de datos, pero puedes extraer En este caso usamos `"{{agent.firstname}} {{agent.lastname}}"` entre comillas ya que es un dato compuesto. Cuando es un dato simple te sugerimos utilizar el ayudante [parser](../helpers/parser.md). {% endhint %} -![](<../../.gitbook/assets/image (10).png>) +![](<../../.gitbook/assets/image (15).png>) ```javascript [ @@ -192,11 +192,11 @@ Ya lista la estructura podrás observar en el visualizador (texto en verde) los Verificando que se asemeje la estructura a la que PowerBI espera recibir, solo faltaría asignar un nombre a este Webhook el cual es solo para que tu equipo pueda diferenciar entre múltiples Webhooks. -![](<../../.gitbook/assets/image (36).png>) +![](<../../.gitbook/assets/image (77).png>) No olvides dar clic en **Guardar**. -![](<../../.gitbook/assets/image (61).png>) +![](<../../.gitbook/assets/image (17).png>) Listo! Ya está integrada tu cuenta Videsk con PowerBI. Ya puedes realizar llamadas y se cargarán en tiempo real! :tada: @@ -204,4 +204,4 @@ Listo! Ya está integrada tu cuenta Videsk con PowerBI. Ya puedes realizar llama Recuerda asignar el conjunto de datos creado a un informe nuevo o existente. {% endhint %} -![Ejemplo de informe en PowerBI con datos enviados mediante Webhooks](<../../.gitbook/assets/image (48).png>) +![Ejemplo de informe en PowerBI con datos enviados mediante Webhooks](<../../.gitbook/assets/image (45).png>) diff --git a/webhooks/variables.md b/webhooks/variables.md index 3495096..252c611 100644 --- a/webhooks/variables.md +++ b/webhooks/variables.md @@ -22,7 +22,7 @@ En caso de webhooks, cada evento posee sus propias variables, algo similar a un Estos eventos los podrás encontrar directamente en el modo editor cuando creas un nuevo webhook, que están ubicados en la parte lateral junto con la pestaña de documentación. -![Ejemplo de diccionario](<../.gitbook/assets/image (52).png>) +![Ejemplo de diccionario](<../.gitbook/assets/image (70).png>) Como cada evento posee sus propias variables, podrás obtener información de cada una de ellas como tipo, descripción y nombre. diff --git a/widgets/acciones-por-url.md b/widgets/acciones-por-url.md new file mode 100644 index 0000000..c1f28e2 --- /dev/null +++ b/widgets/acciones-por-url.md @@ -0,0 +1,70 @@ +--- +description: >- + A continuación podrás ver como realizar llamadas directamente mediante + parámetros en la URL. +--- + +# 🔗 URL Triggers + +## Llamada a segmento + +Con esta función podrás lograr que tus clientes puedan realizar una llamada de forma directa a un segmento uniéndose de forma automática sin clics. Esto provocará que el widget integrado en tu web, se gatille de forma automática. + +{% hint style="info" %} +También puedes disparar una llamada de forma diferida mediante [acción programática](api/metodos.md#segment). +{% endhint %} + +Para ello podrás hacerlo de dos maneras: + +## Manualmente + +Simplemente deberás escribir el enlace de tu sitio web ya sea `tusitioweb.com` o un una página en específico `tusitioweb.com/contact` y añadir un parámetro al final. + +La nomenclatura es `videsk-segment=ID_SEGMENTO`, donde el `ID_SEGMENTO` lo deberás reemplazar con el que necesites y lo podrás obtener desde tu dashboard. + +``` +https://tusitioweb.com/?videsk-segment=ID_DEL_SEGMENTO +https://tusitioweb.com/?videsk-segment=617729f58103e30802b89e7f +``` + +Si envías este enlace a un cliente ya sea por correo electrónico, SMS, WhatsApp, etc. ingresará a la fila de ese segmento de forma automática. + +{% hint style="warning" %} +La unión automática a la fila dependerá del estado de disponibilidad de tus agentes. +{% endhint %} + +{% hint style="info" %} +Si necesitas añadir más parámetros utiliza el carácter `&` para concatenar más parámetros. **El orden de los parámetros no influye!** + +Es útil cuando utilizas plataformas de analíticas como Google analytics que requieren parámetros en la URL. +{% endhint %} + +Ejemplo: + +``` +https://tusitioweb.com?videsk-segment=ID_SEGMENTO&utm_campaign=cyber&utm_source=email +``` + +## Programática + +{% hint style="info" %} +Hemos añadido la función de llamada programática, la cual puedes [ver aquí](api/metodos.md#segment). +{% endhint %} + +Para lograr que tus clientes ingresen a la fila utilizando una acción programática, requiere que tu widget cargue de forma diferida, es decir, solo cargue luego de configurar el/los parámetros en la URL. + +```javascript +function setVideskParameters(segmentId) { + const params = new URLSearchParams(window.location.search) + params.set("videsk-segment", segmentId); // Here goes segment ID + const fullURL = window.location.pathname + '?' + params.toString(); + history.pushState(null, '', fullURL); +} +setVideskParameters("617729f58103e30802b89e7f"); +``` + +{% hint style="success" %} +El código anterior no elimina parámetros existentes solo añadirá `videsk-segment` +{% endhint %} + +Luego de este extracto de código podrás cargar tu widget con Javascript, [como se indica acá](integration/#script-de-integracion). diff --git a/widgets/api/README.md b/widgets/api/README.md index 72ff9b5..48c5540 100644 --- a/widgets/api/README.md +++ b/widgets/api/README.md @@ -14,6 +14,6 @@ A continuación podrás encontrar la API de nuestro widget la cual podrás utili [eventos.md](eventos.md) {% endcontent-ref %} -{% content-ref url="diseno.md" %} -[diseno.md](diseno.md) +{% content-ref url="ajustes.md" %} +[ajustes.md](ajustes.md) {% endcontent-ref %} diff --git a/widgets/api/ajustes.md b/widgets/api/ajustes.md new file mode 100644 index 0000000..6bbc5ec --- /dev/null +++ b/widgets/api/ajustes.md @@ -0,0 +1,117 @@ +# Ajustes + +Nuestro widget posee una configuración o ajuste que contiene componentes como colores de cabecera, cuerpo, botones y textos, donde cada uno de ellos se puede configurar por separado. + +Por defecto, el comportamiento es obtener el ajuste del widget que hayas configurado en tu cuenta mediante nuestra API. + +{% hint style="info" %} +Recuerda que esta función permite sobre escribir los ajustes y diseños que hayas configurado desde tu cuenta. +{% endhint %} + +Pero también es posible forzar un ajuste propio añadiendo un poco de código en tu sitio web. Para ello deberás tener en cuenta que la estructura es la siguiente: + +```json +{ + "logo": { + "url": "...", + "height": 180 + }, + "colors": { + "background": "rgb(255,255, 255, 1)", + "font": "rgb(255,255, 255, 1)", + "gradient": "linear-gradient(to right, rgb(23, 54, 189) 0%, rgb(0, 99, 255) 100%)" + }, + "texts": { + "title": "My title", + "subtitle": "My subtitle.", + "segmentsTitle": "Segment title", + "segmentsSubtitle": "Segment subtitle." + }, + "settings": { "defaultChannel": "video" }, + "orgName": "Company Name", + "services": ["on-demand"] +} +``` + +Esta estructura de parámetros te permite modificar logotipo, colores, textos, ajustes y servicios a visibilizar. + +{% hint style="warning" %} +Lee a continuación antes de modificar la estructura del ajuste. +{% endhint %} + +### Logo + +* `url` deberás colocar una URL válida de tu logotipo +* `height` deberás ingresar el tamaño del logotipo como número (sin unidades) + +### Colors + +{% hint style="info" %} +Es posible en HEX, HSL, pero no es recomendado. +{% endhint %} + +* `background` deberás ingresar un color en formato RGB. +* `font` deberás ingresar un color en formato RGB. +* `gradient` deberás ingresar un gradiente en formato RGB o un solo color RGB. + +### Texts + +{% hint style="info" %} +Si deseas ocultar un título o subtitulo, simplemente puedes dejarlo como vacío, des decir, **`""`**. +{% endhint %} + +* `title` deberás ingresar el título de la cabecera del widget. +* `subtitle` deberás ingresar el subtitulo de cabecera del widget. +* `segmentTitle` deberás ingresar el título que estará sobre el listado de segmentos. +* `segmentSubtitle` deberás ingresar el subtitulo que estará sobre el listado de segmentos. + +### Settings + +* `defaultChannel` permite seleccionar valor por defecto entre `video` o `audio`. + +{% hint style="info" %} +Esta opción solo marcará una opción (micrófono o cámara) por defecto, pero tu cliente podrá igualmente escoger el que desee. +{% endhint %} + +### OrgName + +Ingresa el nombre de tu negocio en este campo. + +### Services + +Deberás escoger qué tipos de servicios están activos para tu widget, ya sea entre `on-demand` que representa tus segmentos y `schedule` para calendarios. Podrás escoger entre uno u otro. + +{% hint style="danger" %} +**No añadas un servicio al listado si no posees al menos 1 segmento o calendario activo en tu cuenta.** + + + +El comportamiento del widget podría ser inesperado. +{% endhint %} + +## Aplicar estilos + +Luego que haz modificado los parámetros del widget deberás aplicar este cambio añadiendo un poco de código a tu sitio web. + +{% hint style="info" %} +La técnica a utilizar a continuación la puedes aplicar desde Devtools en tu navegador para pre-visualizar el diseño antes de aplicarlo en tu sitio. +{% endhint %} + +```javascript +const widgetStyle = {...}; +window.localStorage.setItem('widget-custom-style', JSON.stringify(widgetStyle)); +``` + +`widgetStyle` corresponde a los parámetros configurados previamente. Si obtienes un error de `parsing` verifica que haz escrito correctamente en formato `JSON` o como objeto. + +{% hint style="info" %} +Refresca tu sitio y verás los cambios. +{% endhint %} + +{% hint style="warning" %} +No modifiques el nombre clave `widget-custom-style`, de esta manera identificamos los parámetros personalizados. +{% endhint %} + +## Ejemplo + +{% embed url="https://codesandbox.io/s/widget-settings-docs-pgebyg?file=/main.js" %} diff --git a/widgets/api/eventos.md b/widgets/api/eventos.md index ab60182..a540f41 100644 --- a/widgets/api/eventos.md +++ b/widgets/api/eventos.md @@ -210,3 +210,14 @@ videsk.addEventListener('onConnectionError', ({ date }) => { // Do something with survey and date }); ``` + +## custom-event + +Este evento se dispara cuando se ha configurado un segmento como evento, el cual contiene un payload como `Array` que dependerá de los valores ingresados, los cuales siempre serán `String`. + +```javascript +document.addEventListener('custom-event', event => { + const args = event.detail; + // Do something with values as String +}) +``` diff --git a/widgets/api/introduccion.md b/widgets/api/introduccion.md index 6cb392d..5586ed5 100644 --- a/widgets/api/introduccion.md +++ b/widgets/api/introduccion.md @@ -47,6 +47,6 @@ Antes de comenzar recuerda el uso de la variable global `videsk` como acceso a l [eventos.md](eventos.md) {% endcontent-ref %} -{% content-ref url="diseno.md" %} -[diseno.md](diseno.md) +{% content-ref url="ajustes.md" %} +[ajustes.md](ajustes.md) {% endcontent-ref %} diff --git a/widgets/api/propiedades.md b/widgets/api/propiedades.md index f4d3fac..f6590a5 100644 --- a/widgets/api/propiedades.md +++ b/widgets/api/propiedades.md @@ -6,6 +6,17 @@ description: Propiedades disponibles para realizar acciones de forma 100% progra Nuestro widget contiene propiedades que permiten cambiar o sobreescribir el comportamiento por defecto. +{% hint style="info" %} +Te sugerimos utilizar estas propiedades solo una vez que el evento `videsk-load` sea disparado. + +```javascript +document.addEventListener('videsk-load', () => { + // Puedes usar aquí las propiedades + videsk.xyz = '...'; +}); +``` +{% endhint %} + ## `constraints` Esta propiedad de lectura y escritura permite sobreescribir los valores por defecto de cámara y/o micrófono. @@ -24,11 +35,11 @@ Por defecto, este valor es indefinido. {% tab title="Básico" %} {% code lineNumbers="true" %} ```javascript -videsk.constraints // undefined videsk.constraints = { video: false, // sin cámara audio: true, }; +videsk.constraints // undefined ``` {% endcode %} @@ -72,8 +83,22 @@ videsk.constraints = { ``` {% endcode %} {% endtab %} + +{% tab title="Cámara trasera" %} +{% code lineNumbers="true" %} +```javascript +videsk.constraints = { + audio: true, + video: { + facingMode: 'environment' + } +}; +``` +{% endcode %} +{% endtab %} {% endtabs %} {% hint style="info" %} Te sugerimos utilizar esta propiedad en tótems o kioskos interactivos, ya que podrás definir los permisos con anterioridad sin percibir problemas técnicos. {% endhint %} + diff --git a/widgets/integration/cloudflare.md b/widgets/integration/cloudflare.md index a3ec5fb..de2b302 100644 --- a/widgets/integration/cloudflare.md +++ b/widgets/integration/cloudflare.md @@ -8,32 +8,32 @@ Puedes integrar Videsk mediante Cloudflare en menos de 5 minutos! A continuació Lo primero que debes hacer el seleccionar el sitio de tu cuenta Cloudflare, luego buscar en el panel lateral derecho **Aplicaciones**. -![](<../../.gitbook/assets/image (3) (1).png>) +![](<../../.gitbook/assets/image (28).png>) -![](<../../.gitbook/assets/image (7) (1).png>) +![](<../../.gitbook/assets/image (82).png>) Luego deberás buscar **Videsk** en la barra de búsqueda en la parte superior. Y posteriormente seleccionar la app **Videsk Widget**. -![](<../../.gitbook/assets/image (47).png>) +![](<../../.gitbook/assets/image (56).png>) Finalmente deberás dar clic en el botón superior **Vista previa de su sitio**. -![](<../../.gitbook/assets/image (55).png>) +![](<../../.gitbook/assets/image (76).png>) ## 2. Ingresar token Y en el editor de integraciones deberás ingresar el token público que encontrarás en tu cuenta dashboard. -![](<../../.gitbook/assets/image (21).png>) +![](<../../.gitbook/assets/image (55).png>) Deberás copiar y pegar el token en la casilla **Public Token**. ## 3. Seleccionar páginas -En este paso deberás seleccionar si quieres que tu widget aparezca en todas las páginas de tu sitio o solo en algunas páginas. Para ello podrás dar clic en el botón ubicado en la parte superior donde está el texto Install Videsk Widget on ![](<../../.gitbook/assets/image (5) (1).png>). +En este paso deberás seleccionar si quieres que tu widget aparezca en todas las páginas de tu sitio o solo en algunas páginas. Para ello podrás dar clic en el botón ubicado en la parte superior donde está el texto Install Videsk Widget on ![](<../../.gitbook/assets/image (89).png>). Allí podrás ingresar en qué dominio, subdominio o url aparecerá. -![](<../../.gitbook/assets/image (25).png>) +![](<../../.gitbook/assets/image (20).png>) Listo! :tada: diff --git a/widgets/integration/google-tag-manager.md b/widgets/integration/google-tag-manager.md index abbe577..cc4d8c4 100644 --- a/widgets/integration/google-tag-manager.md +++ b/widgets/integration/google-tag-manager.md @@ -12,11 +12,11 @@ Es posible que no visualices tu widget mediante GTM (Google Tag Manager), si est Deberás ingresar al espacio de trabajo asociado al sitio web que deseas integrar Videsk. Luego dar clic en **Añadir nueva etiqueta**. -![](<../../.gitbook/assets/image (44).png>) +![](<../../.gitbook/assets/image (42).png>) Se desplegará una ventana lateral derecha, donde deberás dar clic en el rectángulo blanco con título **Configuración de la etiqueta**. -![](<../../.gitbook/assets/image (37).png>) +![](<../../.gitbook/assets/image (5).png>) ## 2. Instalar etiqueta de Videsk @@ -26,15 +26,15 @@ A continuación, deberás seleccionar la integración mediante plantillas comuni Luego que cargue el listado deberás buscar "**Videsk**" mediante el buscador ubicado en la parte superior derecha. -![](<../../.gitbook/assets/image (42).png>) +![](<../../.gitbook/assets/image (27).png>) Luego dar clic en el botón azul, **Añadir a espacio de trabajo**. -![](<../../.gitbook/assets/image (68).png>) +![](<../../.gitbook/assets/image (4).png>) Finalmente deberás dar clic en **Añadir**. -![](<../../.gitbook/assets/image (1) (2).png>) +![](<../../.gitbook/assets/image (11).png>) {% hint style="info" %} La secuencia de comendas a insertar es el mismo el cual puedes obtener desde tu cuenta dashboard. @@ -44,11 +44,11 @@ La secuencia de comendas a insertar es el mismo el cual puedes obtener desde tu Ahora ya configurada la etiqueta debemos ingresar el token de nuestro widget. -![](<../../.gitbook/assets/image (24).png>) +![](<../../.gitbook/assets/image (23).png>) Para ello debemos ir a nuestra cuenta dashboard, luego en **Integraciones** y finalmente la pestaña **Integración**. -![](<../../.gitbook/assets/image (22) (1).png>) +![](<../../.gitbook/assets/image (90).png>) Deberás dar clic en el segundo botón de **Copiar**, y luego pegarlo en el campo **Public Token**. @@ -60,4 +60,4 @@ Dependiendo de tu caso podrás hacer uso de activadores preestablecidos en tu cu Puedes ver nuestro video en la parte superior donde explicamos cómo definir un activador para ciertas páginas de nuestro sitio web. -![](<../../.gitbook/assets/image (46).png>) +![](<../../.gitbook/assets/image (65).png>) diff --git a/widgets/integration/wordpress.md b/widgets/integration/wordpress.md index 850c91d..7ff466d 100644 --- a/widgets/integration/wordpress.md +++ b/widgets/integration/wordpress.md @@ -26,15 +26,15 @@ Si es el caso, te sugerimos contactar a tu desarrollador. En el menú lateral izquierdo, deberás buscar **Aspecto** y luego haz clic en **Editor**. -
+
Luego ya con el editor cargado deberás dar clic en el ícono de Wordpress en la parte superior izquierda, para finalmente dar clic en la opción **Template Parts**. -
+
Posteriormente deberás buscar una parte de la plantilla que contenga el nombre Footer o pie de página, y deberás darle clic. -
+
@@ -42,15 +42,15 @@ Posteriormente deberás buscar una parte de la plantilla que contenga el nombre Ya dentro del bloque footer, deberás dar clic en el botón azul + ubicado en la parte superior izquierda del editor, para posteriormente buscar el elemento **Custom HTML**. -
+
Deberás arrastrar el elemento en cualquier parte del pie de página o footer y dentro de la caja de texto pegarás el script de tu cuenta. -
+
Solo queda dar clic en el botón **Guardar** ubicado en la parte superior derecha. -
+
## WordPress 5 o inferior @@ -58,12 +58,12 @@ Solo queda dar clic en el botón **Guardar** ubicado en la parte superior derech En el menú lateral izquierdo, deberás buscar **Aspecto** y luego haz clic en **Widgets**. -
+
### 2. Añadir bloque HTML Luego deberás buscar el elemento **HTML Personalizado** y arrastrarlo a cualquier recuadro que contenga el título **Footer o pie de página**. -
+
Con el elemento en **Footer** solo falta pegar el script que obtuviste de tu cuenta, y dar clic en el botón **Guardar**.