Help
RSS
API
Feed
Maltego
Contact
Domain > dist.aboutsomethink.org
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2025-07-27
13.249.9.35
(
ClassC
)
2025-12-11
3.163.24.10
(
ClassC
)
Port 80
HTTP/1.1 301 Moved PermanentlyServer: CloudFrontDate: Thu, 11 Dec 2025 18:11:45 GMTContent-Type: text/htmlContent-Length: 167Connection: keep-aliveLocation: https://dist.aboutsomethink.org/X-Cache: Redirect from cloudfrontVia: 1.1 13367f2265e830e1595737bd8f2eab92.cloudfront.net (CloudFront)X-Amz-Cf-Pop: HIO52-P2X-Amz-Cf-Id: 0SP4Og2-WJnVVtynByiGEaiABzX9-aNCx0BroN70o5YUWNwV9PWCRACache-Control: max-age900, must-revalidate html>head>title>301 Moved Permanently/title>/head>body>center>h1>301 Moved Permanently/h1>/center>hr>center>CloudFront/center>/body>/html>
Port 443
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 79636Connection: keep-aliveDate: Thu, 11 Dec 2025 18:11:47 GMTLast-Modified: Tue, 30 Sep 2025 14:31:55 GMTETag: 230eb2dc1f4297d6f16664b3cc462131x-amz-server-side-encryption: AES256Accept-Ranges: bytesServer: AmazonS3X-Cache: Miss from cloudfrontVia: 1.1 049ca50de603d43d8c9d0f7716efb414.cloudfront.net (CloudFront)X-Amz-Cf-Pop: HIO52-P2X-Amz-Cf-Id: IHH1QjfkpcsHCwS242olecKZ-rPSyQ0TdRT-dahzrn7-pSvtLWrbggCache-Control: max-age900, must-revalidate !doctype html>html langen> head> meta charsetutf-8> title>ask-frontend/title> meta contentwidthdevice-width, initial-scale1 nameviewport> style>data-color-mode*light, data-color-mode*light body, .markdown-styletheme*light { --color-prettylights-syntax-comment: #6e7781; --color-prettylights-syntax-constant: #0550ae; --color-prettylights-syntax-entity: #8250df; --color-prettylights-syntax-storage-modifier-import: #24292f; --color-prettylights-syntax-entity-tag: #116329; --color-prettylights-syntax-keyword: #cf222e; --color-prettylights-syntax-string: #0a3069; --color-prettylights-syntax-variable: #953800; --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; --color-prettylights-syntax-invalid-illegal-bg: #82071e; --color-prettylights-syntax-carriage-return-text: #f6f8fa; --color-prettylights-syntax-carriage-return-bg: #cf222e; --color-prettylights-syntax-string-regexp: #116329; --color-prettylights-syntax-markup-list: #3b2300; --color-prettylights-syntax-markup-heading: #0550ae; --color-prettylights-syntax-markup-italic: #24292f; --color-prettylights-syntax-markup-bold: #24292f; --color-prettylights-syntax-markup-deleted-text: #82071e; --color-prettylights-syntax-markup-deleted-bg: #FFEBE9; --color-prettylights-syntax-markup-inserted-text: #116329; --color-prettylights-syntax-markup-inserted-bg: #dafbe1; --color-prettylights-syntax-markup-changed-text: #953800; --color-prettylights-syntax-markup-changed-bg: #ffd8b5; --color-prettylights-syntax-markup-ignored-text: #eaeef2; --color-prettylights-syntax-markup-ignored-bg: #0550ae; --color-prettylights-syntax-meta-diff-range: #8250df; --color-prettylights-syntax-brackethighlighter-angle: #57606a; --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; --color-prettylights-syntax-constant-other-reference-link: #0a3069; --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-border-default: #d0d7de; --color-border-muted: hsla(210,18%,87%,1); --color-neutral-muted: rgba(175,184,193,0.2); --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-attention-subtle: #fff8c5; --color-danger-fg: #cf222e; }data-color-mode*dark, data-color-mode*dark body, .markdown-styletheme*dark { --color-prettylights-syntax-comment: #8b949e; --color-prettylights-syntax-constant: #79c0ff; --color-prettylights-syntax-entity: #d2a8ff; --color-prettylights-syntax-storage-modifier-import: #c9d1d9; --color-prettylights-syntax-entity-tag: #7ee787; --color-prettylights-syntax-keyword: #ff7b72; --color-prettylights-syntax-string: #a5d6ff; --color-prettylights-syntax-variable: #ffa657; --color-prettylights-syntax-brackethighlighter-unmatched: #f85149; --color-prettylights-syntax-invalid-illegal-text: #f0f6fc; --color-prettylights-syntax-invalid-illegal-bg: #8e1519; --color-prettylights-syntax-carriage-return-text: #f0f6fc; --color-prettylights-syntax-carriage-return-bg: #b62324; --color-prettylights-syntax-string-regexp: #7ee787; --color-prettylights-syntax-markup-list: #f2cc60; --color-prettylights-syntax-markup-heading: #1f6feb; --color-prettylights-syntax-markup-italic: #c9d1d9; --color-prettylights-syntax-markup-bold: #c9d1d9; --color-prettylights-syntax-markup-deleted-text: #ffdcd7; --color-prettylights-syntax-markup-deleted-bg: #67060c; --color-prettylights-syntax-markup-inserted-text: #aff5b4; --color-prettylights-syntax-markup-inserted-bg: #033a16; --color-prettylights-syntax-markup-changed-text: #ffdfb6; --color-prettylights-syntax-markup-changed-bg: #5a1e02; --color-prettylights-syntax-markup-ignored-text: #c9d1d9; --color-prettylights-syntax-markup-ignored-bg: #1158c7; --color-prettylights-syntax-meta-diff-range: #d2a8ff; --color-prettylights-syntax-brackethighlighter-angle: #8b949e; --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58; --color-prettylights-syntax-constant-other-reference-link: #a5d6ff; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; --color-fg-subtle: #484f58; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-border-default: #30363d; --color-border-muted: #21262d; --color-neutral-muted: rgba(110,118,129,0.4); --color-accent-fg: #58a6ff; --color-accent-emphasis: #1f6feb; --color-attention-subtle: rgba(187,128,9,0.15); --color-danger-fg: #f85149; }.markdown-style { display: block; -webkit-text-size-adjust: 100%; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; font-size: 16px; line-height: 1.5; word-wrap: break-word; color: var(--color-fg-default); background-color: var(--color-canvas-default); } .markdown-style details, .markdown-style figcaption, .markdown-style figure { display: block; } .markdown-style summary { display: list-item; } .markdown-style hidden { display: none !important; } .markdown-style a { background-color: transparent; color: var(--color-accent-fg); text-decoration: none; } .markdown-style a:active, .markdown-style a:hover { outline-width: 0; } .markdown-style abbrtitle { border-bottom: none; text-decoration: underline dotted; } .markdown-style b, .markdown-style strong { font-weight: 600; } .markdown-style dfn { font-style: italic; } .markdown-style h1 { margin: .67em 0; font-weight: 600; padding-bottom: .3em; font-size: 2em; border-bottom: 1px solid var(--color-border-muted); } .markdown-style mark { background-color: var(--color-attention-subtle); color: var(--color-text-primary); } .markdown-style small { font-size: 90%; } .markdown-style sub, .markdown-style sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .markdown-style sub { bottom: -0.25em; } .markdown-style sup { top: -0.5em; } .markdown-style img { border-style: none; max-width: 100%; box-sizing: content-box; background-color: var(--color-canvas-default); } .markdown-style code, .markdown-style kbd, .markdown-style pre, .markdown-style samp { font-family: monospace,monospace; font-size: 1em; } .markdown-style figure { margin: 1em 40px; } .markdown-style hr { box-sizing: content-box; overflow: hidden; background: transparent; border-bottom: 1px solid var(--color-border-muted); height: .25em; padding: 0; margin: 24px 0; background-color: var(--color-border-default); border: 0; } .markdown-style input { font: inherit; margin: 0; overflow: visible; font-family: inherit; font-size: inherit; line-height: inherit; } .markdown-style typebutton, .markdown-style typereset, .markdown-style typesubmit { -webkit-appearance: button; } .markdown-style typebutton::-moz-focus-inner, .markdown-style typereset::-moz-focus-inner, .markdown-style typesubmit::-moz-focus-inner { border-style: none; padding: 0; } .markdown-style typebutton:-moz-focusring, .markdown-style typereset:-moz-focusring, .markdown-style typesubmit:-moz-focusring { outline: 1px dotted ButtonText; } .markdown-style typecheckbox, .markdown-style typeradio { box-sizing: border-box; padding: 0; } .markdown-style typenumber::-webkit-inner-spin-button, .markdown-style typenumber::-webkit-outer-spin-button { height: auto; } .markdown-style typesearch { -webkit-appearance: textfield; outline-offset: -2px; } .markdown-style typesearch::-webkit-search-cancel-button, .markdown-style typesearch::-webkit-search-decoration { -webkit-appearance: none; } .markdown-style ::-webkit-input-placeholder { color: inherit; opacity: .54; } .markdown-style ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } .markdown-style a:hover { text-decoration: underline; } .markdown-style hr::before { display: table; content: ; } .markdown-style hr::after { display: table; clear: both; content: ; } .markdown-style table { border-spacing: 0; border-collapse: collapse; display: block; width: max-content; max-width: 100%; overflow: auto; } .markdown-style td, .markdown-style th { padding: 0; } .markdown-style details summary { cursor: pointer; } .markdown-style details:not(open)>*:not(summary) { display: none !important; } .markdown-style kbd { display: inline-block; padding: 3px 5px; font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; line-height: 10px; color: var(--color-fg-default); vertical-align: middle; background-color: var(--color-canvas-subtle); border: solid 1px var(--color-neutral-muted); border-bottom-color: var(--color-neutral-muted); border-radius: 6px; box-shadow: inset 0 -1px 0 var(--color-neutral-muted); } .markdown-style h1, .markdown-style h2, .markdown-style h3, .markdown-style h4, .markdown-style h5, .markdown-style h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; } .markdown-style h2 { font-weight: 600; padding-bottom: .3em; font-size: 1.5em; border-bottom: 1px solid var(--color-border-muted); } .markdown-style h3 { font-weight: 600; font-size: 1.25em; } .markdown-style h4 { font-weight: 600; font-size: 1em; } .markdown-style h5 { font-weight: 600; font-size: .875em; } .markdown-style h6 { font-weight: 600; font-size: .85em; color: var(--color-fg-muted); } .markdown-style p { margin-top: 0; margin-bottom: 10px; } .markdown-style blockquote { margin: 0; padding: 0 1em; color: var(--color-fg-muted); border-left: .25em solid var(--color-border-default); } .markdown-style ul, .markdown-style ol { margin-top: 0; margin-bottom: 0; padding-left: 2em; } .markdown-style ol ol, .markdown-style ul ol { list-style-type: lower-roman; } .markdown-style ul ul ol, .markdown-style ul ol ol, .markdown-style ol ul ol, .markdown-style ol ol ol { list-style-type: lower-alpha; } .markdown-style dd { margin-left: 0; } .markdown-style tt, .markdown-style code { font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; } .markdown-style pre { margin-top: 0; margin-bottom: 0; font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; font-size: 12px; word-wrap: normal; } .markdown-style .octicon { display: inline-block; overflow: visible !important; vertical-align: text-bottom; fill: currentColor; } .markdown-style ::placeholder { color: var(--color-fg-subtle); opacity: 1; } .markdown-style input::-webkit-outer-spin-button, .markdown-style input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }.markdown-style .token.comment, .markdown-style .token.prolog, .markdown-style .token.doctype, .markdown-style .token.cdata { color: var(--color-prettylights-syntax-comment); } .markdown-style .token.namespace { opacity: 0.7; } .markdown-style .token.tag, .markdown-style .token.selector, .markdown-style .token.constant, .markdown-style .token.symbol, .markdown-style .token.deleted { color: var(--color-prettylights-syntax-entity-tag); } .markdown-style .token.maybe-class-name { color: var(--color-prettylights-syntax-variable); } .markdown-style .token.property-access, .markdown-style .token.operator, .markdown-style .token.boolean, .markdown-style .token.number, .markdown-style .token.selector .markdown-style .token.class, .markdown-style .token.attr-name, .markdown-style .token.string, .markdown-style .token.char, .markdown-style .token.builtin { color: var(--color-prettylights-syntax-constant); } .markdown-style .token.deleted { color: var(--color-prettylights-syntax-markup-deleted-text); } .markdown-style .token.property { color: var(--color-prettylights-syntax-constant); } .markdown-style .token.punctuation { color: var(--color-prettylights-syntax-markup-bold); } .markdown-style .token.function { color: var(--color-prettylights-syntax-entity); } .markdown-style .code-line .token.deleted { background-color: var(--color-prettylights-syntax-markup-deleted-bg); } .markdown-style .token.inserted { color: var(--color-prettylights-syntax-markup-inserted-text); } .markdown-style .code-line .token.inserted { background-color: var(--color-prettylights-syntax-markup-inserted-bg); } .markdown-style .token.variable { color: var(--color-prettylights-syntax-constant); } .markdown-style .token.entity, .markdown-style .token.url, .language-css .markdown-style .token.string, .style .markdown-style .token.string { color: var(--color-prettylights-syntax-string); } .markdown-style .token.color, .markdown-style .token.atrule, .markdown-style .token.attr-value, .markdown-style .token.function, .markdown-style .token.class-name { color: var(--color-prettylights-syntax-string); } .markdown-style .token.rule, .markdown-style .token.regex, .markdown-style .token.important, .markdown-style .token.keyword { color: var(--color-prettylights-syntax-keyword); } .markdown-style .token.coord { color: var(--color-prettylights-syntax-meta-diff-range); } .markdown-style .token.important, .markdown-style .token.bold { font-weight: bold; } .markdown-style .token.italic { font-style: italic; } .markdown-style .token.entity { cursor: help; }.markdown-style data-catalyst { display: block; } .markdown-style g-emoji { font-family: Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; font-size: 1em; font-style: normal !important; font-weight: 400; line-height: 1; vertical-align: -0.075em; } .markdown-style g-emoji img { width: 1em; height: 1em; } .markdown-style::before { display: table; content: ; } .markdown-style::after { display: table; clear: both; content: ; } .markdown-style>*:first-child { margin-top: 0 !important; } .markdown-style>*:last-child { margin-bottom: 0 !important; } .markdown-style a:not(href) { color: inherit; text-decoration: none; } .markdown-style .absent { color: var(--color-danger-fg); } .markdown-style a.anchor { float: left; padding-right: 4px; margin-left: -20px; line-height: 1; } .markdown-style a.anchor:focus { outline: none; } .markdown-style p, .markdown-style blockquote, .markdown-style ul, .markdown-style ol, .markdown-style dl, .markdown-style table, .markdown-style pre, .markdown-style details { margin-top: 0; margin-bottom: 16px; } .markdown-style blockquote>:first-child { margin-top: 0; } .markdown-style blockquote>:last-child { margin-bottom: 0; } .markdown-style sup>a::before { content: ; } .markdown-style sup>a::after { content: ; }.markdown-style .octicon-video { border: 1px solid #d0d7de !important; border-radius: 6px !important; display: block; } .markdown-style .octicon-video summary { border-bottom: 1px solid #d0d7de !important; padding: 8px 16px !important; cursor: pointer; } .markdown-style .octicon-video > video { display: block !important; max-width: 100% !important; padding: 2px; box-sizing: border-box; border-bottom-right-radius: 6px !important; border-bottom-left-radius: 6px !important; } .markdown-style details.octicon-video:not(open)>*:not(summary) { display: none !important; } .markdown-style details.octicon-video:not(open) > summary { border-bottom: 0 !important; } .markdown-style h1 .octicon-link, .markdown-style h2 .octicon-link, .markdown-style h3 .octicon-link, .markdown-style h4 .octicon-link, .markdown-style h5 .octicon-link, .markdown-style h6 .octicon-link { color: var(--color-fg-default); vertical-align: middle; visibility: hidden; } .markdown-style h1:hover .anchor, .markdown-style h2:hover .anchor, .markdown-style h3:hover .anchor, .markdown-style h4:hover .anchor, .markdown-style h5:hover .anchor, .markdown-style h6:hover .anchor { text-decoration: none; } .markdown-style h1:hover .anchor .octicon-link, .markdown-style h2:hover .anchor .octicon-link, .markdown-style h3:hover .anchor .octicon-link, .markdown-style h4:hover .anchor .octicon-link, .markdown-style h5:hover .anchor .octicon-link, .markdown-style h6:hover .anchor .octicon-link { visibility: visible; } .markdown-style h1 tt, .markdown-style h1 code, .markdown-style h2 tt, .markdown-style h2 code, .markdown-style h3 tt, .markdown-style h3 code, .markdown-style h4 tt, .markdown-style h4 code, .markdown-style h5 tt, .markdown-style h5 code, .markdown-style h6 tt, .markdown-style h6 code { padding: 0 .2em; font-size: inherit; } .markdown-style ul.no-list, .markdown-style ol.no-list { padding: 0; list-style-type: none; } .markdown-style oltype1 { list-style-type: decimal; } .markdown-style oltypea { list-style-type: lower-alpha; } .markdown-style oltypei { list-style-type: lower-roman; } .markdown-style div>ol:not(type) { list-style-type: decimal; } .markdown-style ul ul, .markdown-style ul ol, .markdown-style ol ol, .markdown-style ol ul { margin-top: 0; margin-bottom: 0; } .markdown-style li>p { margin-top: 16px; } .markdown-style li+li { margin-top: .25em; } .markdown-style dl { padding: 0; } .markdown-style dl dt { padding: 0; margin-top: 16px; font-size: 1em; font-style: italic; font-weight: 600; } .markdown-style dl dd { padding: 0 16px; margin-bottom: 16px; } .markdown-style table th { font-weight: 600; } .markdown-style table th, .markdown-style table td { padding: 6px 13px; border: 1px solid var(--color-border-default); } .markdown-style table tr { background-color: var(--color-canvas-default); border-top: 1px solid var(--color-border-muted); } .markdown-style table tr:nth-child(2n) { background-color: var(--color-canvas-subtle); } .markdown-style table img { background-color: transparent; vertical-align: middle; } .markdown-style imgalignright { padding-left: 20px; } .markdown-style imgalignleft { padding-right: 20px; } .markdown-style .emoji { max-width: none; vertical-align: text-top; background-color: transparent; } .markdown-style span.frame { display: block; overflow: hidden; } .markdown-style span.frame>span { display: block; float: left; width: auto; padding: 7px; margin: 13px 0 0; overflow: hidden; border: 1px solid var(--color-border-default); } .markdown-style span.frame span img { display: block; float: left; } .markdown-style span.frame span span { display: block; padding: 5px 0 0; clear: both; color: var(--color-fg-default); } .markdown-style span.align-center { display: block; overflow: hidden; clear: both; } .markdown-style span.align-center>span { display: block; margin: 13px auto 0; overflow: hidden; text-align: center; } .markdown-style span.align-center span img { margin: 0 auto; text-align: center; } .markdown-style span.align-right { display: block; overflow: hidden; clear: both; } .markdown-style span.align-right>span { display: block; margin: 13px 0 0; overflow: hidden; text-align: right; } .markdown-style span.align-right span img { margin: 0; text-align: right; } .markdown-style span.float-left { display: block; float: left; margin-right: 13px; overflow: hidden; } .markdown-style span.float-left span { margin: 13px 0 0; } .markdown-style span.float-right { display: block; float: right; margin-left: 13px; overflow: hidden; } .markdown-style span.float-right>span { display: block; margin: 13px auto 0; overflow: hidden; text-align: right; } .markdown-style code, .markdown-style tt { padding: .2em .4em; margin: 0; font-size: 85%; background-color: var(--color-neutral-muted); border-radius: 6px; } .markdown-style code br, .markdown-style tt br { display: none; } .markdown-style del code { text-decoration: inherit; } .markdown-style pre code { font-size: 100%; } .markdown-style pre>code { padding: 0; margin: 0; word-break: normal; white-space: pre; background: transparent; border: 0; } .markdown-style pre { position: relative; font-size: 85%; line-height: 1.45; background-color: var(--color-canvas-subtle); border-radius: 6px; } .markdown-style pre code, .markdown-style pre tt { display: inline; max-width: auto; padding: 0; margin: 0; overflow: visible; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; } .markdown-style pre > code { padding: 16px; overflow: auto; display: block; } .markdown-style .csv-data td, .markdown-style .csv-data th { padding: 5px; overflow: hidden; font-size: 12px; line-height: 1; text-align: left; white-space: nowrap; } .markdown-style .csv-data .blob-num { padding: 10px 8px 9px; text-align: right; background: var(--color-canvas-default); border: 0; } .markdown-style .csv-data tr { border-top: 0; } .markdown-style .csv-data th { font-weight: 600; background: var(--color-canvas-subtle); border-top: 0; } .markdown-style .footnotes { font-size: 12px; color: var(--color-fg-muted); border-top: 1px solid var(--color-border-default); } .markdown-style .footnotes ol { padding-left: 16px; } .markdown-style .footnotes li { position: relative; } .markdown-style .footnotes li:target::before { position: absolute; top: -8px; right: -8px; bottom: -8px; left: -24px; pointer-events: none; content: ; border: 2px solid var(--color-accent-emphasis); border-radius: 6px; } .markdown-style .footnotes li:target { color: var(--color-fg-default); } .markdown-style .footnotes .data-footnote-backref g-emoji { font-family: monospace; } .markdown-style .task-list-item { list-style-type: none; } .markdown-style .task-list-item label { font-weight: 400; } .markdown-style .task-list-item.enabled label { cursor: pointer; } .markdown-style .task-list-item+.task-list-item { margin-top: 3px; } .markdown-style .task-list-item .handle { display: none; } .markdown-style .task-list-item-checkbox, .markdown-style inputtypecheckbox { margin: 0 .2em .25em -1.6em; vertical-align: middle; } .markdown-style .contains-task-list:dir(rtl) .task-list-item-checkbox, .markdown-style .contains-task-list:dir(rtl) inputtypecheckbox { margin: 0 -1.6em .25em .2em; } .markdown-style ::-webkit-calendar-picker-indicator { filter: invert(50%); }/** copy button style **/.markdown-style pre .copied { display: flex; position: absolute; cursor: pointer; color: #a5afbb; top: 6px; right: 6px; border-radius: 5px; background: #82828226; padding: 6px; font-size: 12px; transition: all .3s;}.markdown-style pre .copied:not(.active) { visibility: hidden; }.markdown-style pre:hover .copied { visibility: visible; }.markdown-style pre:hover .copied:hover { background: #4caf50; color: #fff; }.markdown-style pre:hover .copied:active,.markdown-style pre .copied.active { background: #2e9b33; color: #fff; }.markdown-style pre .copied svg { position: relative; }.markdown-style pre .copied .octicon-copy { display: block; }.markdown-style pre .copied .octicon-check { display: none; }.markdown-style pre .active .octicon-copy { display: none; }.markdown-style pre .active .octicon-check { display: block; }/** octicon style **/.markdown-style h1:hover a.anchor .octicon-link:before,.markdown-style h2:hover a.anchor .octicon-link:before,.markdown-style h3:hover a.anchor .octicon-link:before,.markdown-style h4:hover a.anchor .octicon-link:before,.markdown-style h5:hover a.anchor .octicon-link:before,.markdown-style h6:hover a.anchor .octicon-link:before { width: 16px; height: 16px; content: ; display: inline-block; background-color: currentColor; -webkit-mask-image: url(data:image/svg+xml,svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 16 16 version1.1 aria-hiddentrue>path fill-ruleevenodd dM7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z>/path>/svg>); mask-image: url(data:image/svg+xml,svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 16 16 version1.1 aria-hiddentrue>path fill-ruleevenodd dM7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z>/path>/svg>);}.markdown-style ::-webkit-scrollbar { background: transparent; width: 8px; height: 8px;}.markdown-style ::-webkit-scrollbar-thumb { background: var(--color-fg-muted); border-radius: 10px;}/style> /head> body>dark-mode styleposition: fixed; top: 8px; left: 10px; z-index: 999; darkDark lightLight permanenttrue>/dark-mode>script>const tdocument;const e_dark_mode_theme_;const spermanent;const ocolorschemechange;const ipermanentcolorscheme;const hlight;const rdark;const n(t,e,se)>{Object.defineProperty(t,s,{enumerable:true,get(){const tthis.getAttribute(e);return tnull?:t},set(t){this.setAttribute(e,t)}})};const c(t,e,se)>{Object.defineProperty(t,s,{enumerable:true,get(){return this.hasAttribute(e)},set(t){if(t){this.setAttribute(e,)}else{this.removeAttribute(e)}}})};class a extends HTMLElement{static get observedAttributes(){returnmode,h,r,s}LOCAL_NANEe;constructor(){super();this.t()}connectedCallback(){n(this,mode);n(this,r);n(this,h);c(this,s);const alocalStorage.getItem(e);if(a&&h,r.includes(a)){this.modea;this.permanenttrue}if(this.permanent&&!a){localStorage.setItem(e,this.mode)}const lh,r.includes(a);if(this.permanent&&a){this.o()}else{if(window.matchMedia&&window.matchMedia((prefers-color-scheme: dark)).matches){this.moder;this.o()}if(window.matchMedia&&window.matchMedia((prefers-color-scheme: light)).matches){this.modeh;this.o()}}if(!this.permanent&&!l){window.matchMedia((prefers-color-scheme: light)).onchanget>{this.modet.matches?h:r;this.o()};window.matchMedia((prefers-color-scheme: dark)).onchanget>{this.modet.matches?r:h;this.o()}}const dnew MutationObserver(((s,h)>{this.modet.documentElement.dataset.colorMode;if(this.permanent&&l){localStorage.setItem(e,this.mode);this.i(i,{permanent:this.permanent})}this.h();this.i(o,{colorScheme:this.mode})}));d.observe(t.documentElement,{attributes:true});this.i(o,{colorScheme:this.mode});this.h()}attributeChangedCallback(t,s,o){if(tmode&&s!o&&h,r.includes(o)){const tlocalStorage.getItem(e);if(this.modet){this.modeo;this.h();this.o()}else if(this.mode&&this.mode!t){this.h();this.o()}}else if((th||tr)&&s!o){this.h()}if(tpermanent&&typeof this.permanentboolean){this.permanent?localStorage.setItem(e,this.mode):localStorage.removeItem(e)}}o(){t.documentElement.setAttribute(data-color-mode,this.mode)}h(){this.icon.textContentthis.modeh?๐:๐;this.text.textContentthis.modeh?this.getAttribute(r):this.getAttribute(h);if(!this.text.textContent&&this.text.parentElement&&this.text){this.text.parentElement.removeChild(this.text)}}t(){var sthis.attachShadow({mode:open});this.labelt.createElement(span);this.label.setAttribute(class,wrapper);this.label.onclick()>{this.modethis.modeh?r:h;if(this.permanent){localStorage.setItem(e,this.mode)}this.o();this.h()};s.appendChild(this.label);this.icont.createElement(span);this.icon.particon;this.label.appendChild(this.icon);this.textt.createElement(span);this.text.parttext;this.label.appendChild(this.text);const o`data-color-mode*dark, data-color-mode*dark body { color-scheme: dark; --color-theme-bg: #0d1117; --color-theme-text: #c9d1d9; background-color: var(--color-theme-bg); color: var(--color-theme-text);}data-color-mode*light, data-color-mode*light body { color-scheme: light; --color-theme-bg: #fff; --color-theme-text: #24292f; background-color: var(--color-theme-bg); color: var(--color-theme-text);}`;const i_dark_mode_style_;const nt.getElementById(i);if(!n){var ct.createElement(style);c.idi;c.textContento;t.head.appendChild(c)}var at.createElement(style);a.textContent` .wrapper { cursor: pointer; user-select: none; position: relative; } .wrapper > span + span { margin-left: .4rem; } `;s.appendChild(a)}i(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:true,composed:true,detail:e}))}}customElements.define(dark-mode,a);/script>div stylemax-width: 960px; margin: 0 auto 60px auto; padding: 8px; classmarkdown-style> h1 idask-frontend>a classanchor aria-hiddentrue tabindex-1 href#ask-frontend>span classocticon octicon-link>/span>/a>ASK Frontend/h1> ul> li>a href#overview>Overview/a>/li> li>a href#installation>Installation/a>/li> li>a href#ask-button-setup>code>ask-button/code> Setup/a>/li> li>a href#ask-chat-setup>code>ask-chat/code> Setup/a>/li> li>a href#configuration>Configuration/a>/li> li>a href#customize-styles>Customize Styles/a>/li> li>a href#chat-commands>Chat commands/a>/li> li>a href#state>State/a>/li> li>a href#advanced-usage>Advanced usage/a>/li> /ul> h2 idoverview>a classanchor aria-hiddentrue tabindex-1 href#overview>span classocticon octicon-link>/span>/a>Overview/h2> p> ASK Frontend provides two a hrefhttps://developer.mozilla.org/en-US/docs/Web/API/Web_components>web components/a> for talking with a hrefhttps://aboutsomethink.org/>ASK/a>. /p> p>These two components are a href#ask-button-setup>code>ask-button/code>/a> and a href#ask-chat-setup>code>ask-chat/code>/a>./p> h2 idinstallation>a classanchor aria-hiddentrue tabindex-1 href#installation>span classocticon octicon-link>/span>/a>Installation/h2> p>ASK Frontend is delivered in two variants:/p> ul> li>Script (iife)/li> li>Vue components (umd/esm)/li> /ul> p>The remainder of the document explains the usage of the iife variant./p> p> If you are integrating ASK into a Vue application and want to use the Vue components, feel free to reach out to a hrefmailto:development@picturepipe.com>us/a> for further support. /p> h2 idask-button-setup>a classanchor aria-hiddentrue tabindex-1 href#ask-button-setup>span classocticon octicon-link>/span>/a>code>ask-button/code> Setup/h2> p>The code><ask-button>/code> component provides all you need for quickly integrating ASK into your site./p> p>It will add a button to open the ASK chat to your site. The chat will be shown using the code><ask-chat>/code> component./p> ol> li>Add Script pre classlanguage-html>code classlanguage-html code-highlight>span classcode-line line-number line1>span classtoken tag>span classtoken tag>span classtoken punctuation></span>script/span> span classtoken attr-name>src/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>https://dist.aboutsomethink.org/ask-frontend.iife.jsspan classtoken punctuation>/span>/span>span classtoken punctuation>>/span>/span>span classtoken script>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>script/span>span classtoken punctuation>>/span>/span>/span>/code>div onclickcopied(this) data-codescript src"https://dist.aboutsomethink.org/ask-frontend.iife.js">/script> classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> /li> li>Add a href#configuration>Configuration/a> pre classlanguage-html>code classlanguage-html code-highlight>span classcode-line line-number line1>span classtoken tag>span classtoken tag>span classtoken punctuation></span>script/span>span classtoken punctuation>>/span>/span>span classtoken script>span classtoken language-javascript>/span>/span>/span>span classcode-line line-number line2>span classtoken script>span classtoken language-javascript> span classtoken dom variable>window/span>span classtoken punctuation>./span>span classtoken method function property-access>askSetup/span>span classtoken punctuation>(/span>span classtoken punctuation>{/span>/span>/span>/span>span classcode-line line-number line3>span classtoken script>span classtoken language-javascript> span classtoken literal-property property>botID/span>span classtoken operator>:/span> span classtoken number>23/span>span classtoken punctuation>,/span> span classtoken comment>// Replace with bot id provided for your deployment/span>/span>/span>/span>span classcode-line line-number line4>span classtoken script>span classtoken language-javascript> span classtoken literal-property property>token/span>span classtoken operator>:/span> span classtoken string>deadbeefdeadbeefdeadbeefdeadbeef/span> span classtoken comment>// Replace with token provided for your deployment/span>/span>/span>/span>span classcode-line line-number line5>span classtoken script>span classtoken language-javascript> span classtoken punctuation>}/span>span classtoken punctuation>)/span>/span>/span>/span>span classcode-line line-number line6>span classtoken script>span classtoken language-javascript>/span>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>script/span>span classtoken punctuation>>/span>/span>/span>/code>div onclickcopied(this) data-codescript> window.askSetup({ botID: 23, // Replace with bot id provided for your deployment token: "deadbeefdeadbeefdeadbeefdeadbeef" // Replace with token provided for your deployment })/script> classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> /li> li>Add Web Component pre classlanguage-html>code classlanguage-html code-highlight>span classcode-line line-number line1>span classtoken tag>span classtoken tag>span classtoken punctuation></span>ask-button/span>span classtoken punctuation>>/span>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>ask-button/span>span classtoken punctuation>>/span>/span>/span>/code>div onclickcopied(this) data-codeask-button>/ask-button> classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> /li> /ol> h3 idfull-example>a classanchor aria-hiddentrue tabindex-1 href#full-example>span classocticon octicon-link>/span>/a>Full example/h3> pre classlanguage-html>code classlanguage-html code-highlight>span classcode-line line-number line1>span classtoken tag>span classtoken tag>span classtoken punctuation></span>html/span> span classtoken attr-name>lang/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>enspan classtoken punctuation>/span>/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line2> span classtoken tag>span classtoken tag>span classtoken punctuation></span>head/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line3> span classtoken comment><!-- Add the ask-frontend script into the head -->/span>/span>span classcode-line line-number line4> span classtoken tag>span classtoken tag>span classtoken punctuation></span>script/span> span classtoken attr-name>src/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>https://dist.aboutsomethink.org/ask-frontend.iife.jsspan classtoken punctuation>/span>/span>span classtoken punctuation>>/span>/span>span classtoken script>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>script/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line5> span classtoken tag>span classtoken tag>span classtoken punctuation></span>script/span>span classtoken punctuation>>/span>/span>span classtoken script>span classtoken language-javascript>/span>/span>/span>span classcode-line line-number line6>span classtoken script>span classtoken language-javascript> span classtoken dom variable>window/span>span classtoken punctuation>./span>span classtoken method function property-access>askSetup/span>span classtoken punctuation>(/span>span classtoken punctuation>{/span>/span>/span>/span>span classcode-line line-number line7>span classtoken script>span classtoken language-javascript> span classtoken literal-property property>botID/span>span classtoken operator>:/span> span classtoken number>23/span>span classtoken punctuation>,/span> span classtoken comment>// Replace with bot id provided for your deployment/span>/span>/span>/span>span classcode-line line-number line8>span classtoken script>span classtoken language-javascript> span classtoken literal-property property>token/span>span classtoken operator>:/span> span classtoken string>deadbeefdeadbeefdeadbeefdeadbeef/span> span classtoken comment>// Replace with token provided for your deployment/span>/span>/span>/span>span classcode-line line-number line9>span classtoken script>span classtoken language-javascript> span classtoken punctuation>}/span>span classtoken punctuation>)/span>/span>/span>/span>span classcode-line line-number line10>span classtoken script>span classtoken language-javascript> /span>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>script/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line11> span classtoken tag>span classtoken tag>span classtoken punctuation><//span>head/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line12> span classtoken tag>span classtoken tag>span classtoken punctuation></span>body/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line13> span classtoken comment><!-- Add the ask-button into the body -->/span>/span>span classcode-line line-number line14> span classtoken tag>span classtoken tag>span classtoken punctuation></span>ask-button/span>span classtoken punctuation>>/span>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>ask-button/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line15> span classtoken tag>span classtoken tag>span classtoken punctuation><//span>body/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line16>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>html/span>span classtoken punctuation>>/span>/span>/span>/code>div onclickcopied(this) data-codehtml lang"en"> head> !-- Add the ask-frontend script into the head --> script src"https://dist.aboutsomethink.org/ask-frontend.iife.js">/script> script> window.askSetup({ botID: 23, // Replace with bot id provided for your deployment token: "deadbeefdeadbeefdeadbeefdeadbeef" // Replace with token provided for your deployment }) /script> /head> body> !-- Add the ask-button into the body --> ask-button>/ask-button> /body>/html> classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> h2 idask-chat-setup>a classanchor aria-hiddentrue tabindex-1 href#ask-chat-setup>span classocticon octicon-link>/span>/a>code>ask-chat/code> Setup/h2> p>code><ask-chat>/code> provides a component for implementations that want to provide a more customized experience./p> p> This component just provides the chat logic and allows for integration into your site in any way you like, for example including the chat into specific pages. /p> ol> li>Add Script pre classlanguage-html>code classlanguage-html code-highlight>span classcode-line line-number line1>span classtoken tag>span classtoken tag>span classtoken punctuation></span>script/span> span classtoken attr-name>src/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>https://dist.aboutsomethink.org/ask-frontend.iife.jsspan classtoken punctuation>/span>/span>span classtoken punctuation>>/span>/span>span classtoken script>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>script/span>span classtoken punctuation>>/span>/span>/span>/code>div onclickcopied(this) data-codescript src"https://dist.aboutsomethink.org/ask-frontend.iife.js">/script> classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> /li> li>Add a href#configuration>Configuration/a> pre classlanguage-html>code classlanguage-html code-highlight>span classcode-line line-number line1>span classtoken tag>span classtoken tag>span classtoken punctuation></span>script/span>span classtoken punctuation>>/span>/span>span classtoken script>span classtoken language-javascript>/span>/span>/span>span classcode-line line-number line2>span classtoken script>span classtoken language-javascript> span classtoken dom variable>window/span>span classtoken punctuation>./span>span classtoken method function property-access>askSetup/span>span classtoken punctuation>(/span>span classtoken punctuation>{/span>/span>/span>/span>span classcode-line line-number line3>span classtoken script>span classtoken language-javascript> span classtoken literal-property property>botID/span>span classtoken operator>:/span> span classtoken number>23/span>span classtoken punctuation>,/span> span classtoken comment>// Replace with bot id provided for your deployment/span>/span>/span>/span>span classcode-line line-number line4>span classtoken script>span classtoken language-javascript> span classtoken literal-property property>token/span>span classtoken operator>:/span> span classtoken string>deadbeefdeadbeefdeadbeefdeadbeef/span> span classtoken comment>// Replace with token provided for your deployment/span>/span>/span>/span>span classcode-line line-number line5>span classtoken script>span classtoken language-javascript> span classtoken punctuation>}/span>span classtoken punctuation>)/span>/span>/span>/span>span classcode-line line-number line6>span classtoken script>span classtoken language-javascript>/span>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>script/span>span classtoken punctuation>>/span>/span>/span>/code>div onclickcopied(this) data-codescript> window.askSetup({ botID: 23, // Replace with bot id provided for your deployment token: "deadbeefdeadbeefdeadbeefdeadbeef" // Replace with token provided for your deployment })/script> classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> /li> li>Add Web Component pre classlanguage-html>code classlanguage-html code-highlight>span classcode-line line-number line1>span classtoken tag>span classtoken tag>span classtoken punctuation></span>ask-chat/span>span classtoken punctuation>>/span>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>ask-chat/span>span classtoken punctuation>>/span>/span>/span>/code>div onclickcopied(this) data-codeask-chat>/ask-chat> classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> /li> /ol> p>By default, the component extends to the available height using code>height: 100%/code>. This can be overwritten by passing styles to the component, like this:/p> pre classlanguage-html>code classlanguage-html code-highlight>span classcode-line line-number line1>span classtoken tag>span classtoken tag>span classtoken punctuation></span>ask-chat/span> span classtoken special-attr>span classtoken attr-name>style/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>span classtoken value css language-css>span classtoken property>height/span>span classtoken punctuation>:/span> span classtoken number>400/span>span classtoken unit>px/span>span classtoken punctuation>;/span>/span>span classtoken punctuation>/span>/span>/span>span classtoken punctuation>>/span>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>ask-chat/span>span classtoken punctuation>>/span>/span>/span>/code>div onclickcopied(this) data-codeask-chat style"height: 400px;">/ask-chat> classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> h3 idexample-creating-a-chat-dialog>a classanchor aria-hiddentrue tabindex-1 href#example-creating-a-chat-dialog>span classocticon octicon-link>/span>/a>Example creating a chat dialog/h3> pre classlanguage-html>code classlanguage-html code-highlight>span classcode-line line-number line1>span classtoken tag>span classtoken tag>span classtoken punctuation></span>button/span> span classtoken special-attr>span classtoken attr-name>onclick/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>span classtoken value javascript language-javascript>chatspan classtoken punctuation>./span>span classtoken method function property-access>show/span>span classtoken punctuation>(/span>span classtoken punctuation>)/span>/span>span classtoken punctuation>/span>/span>/span>span classtoken punctuation>>/span>/span>open modalspan classtoken tag>span classtoken tag>span classtoken punctuation><//span>button/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line2>/span>span classcode-line line-number line3>span classtoken tag>span classtoken tag>span classtoken punctuation></span>dialog/span> span classtoken attr-name>id/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>chatspan classtoken punctuation>/span>/span> span classtoken special-attr>span classtoken attr-name>style/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>span classtoken value css language-css>span classtoken property>width/span>span classtoken punctuation>:/span> span classtoken number>80/span>span classtoken unit>dvw/span>span classtoken punctuation>;/span> span classtoken property>height/span>span classtoken punctuation>:/span> span classtoken number>60/span>span classtoken unit>dvh/span>span classtoken punctuation>;/span>/span>span classtoken punctuation>/span>/span>/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line4> span classtoken tag>span classtoken tag>span classtoken punctuation></span>form/span> span classtoken attr-name>method/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>dialogspan classtoken punctuation>/span>/span> span classtoken special-attr>span classtoken attr-name>style/span>span classtoken attr-value>span classtoken punctuation attr-equals>/span>span classtoken punctuation>/span>span classtoken value css language-css>span classtoken property>position/span>span classtoken punctuation>:/span> absolutespan classtoken punctuation>;/span> span classtoken property>right/span>span classtoken punctuation>:/span> span classtoken number>10/span>span classtoken unit>px/span>/span>span classtoken punctuation>/span>/span>/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line5> span classtoken tag>span classtoken tag>span classtoken punctuation></span>button/span>span classtoken punctuation>>/span>/span>โspan classtoken tag>span classtoken tag>span classtoken punctuation><//span>button/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line6> span classtoken tag>span classtoken tag>span classtoken punctuation><//span>form/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line7>/span>span classcode-line line-number line8> span classtoken tag>span classtoken tag>span classtoken punctuation></span>ask-chat/span>span classtoken punctuation>>/span>/span>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>ask-chat/span>span classtoken punctuation>>/span>/span>/span>span classcode-line line-number line9>span classtoken tag>span classtoken tag>span classtoken punctuation><//span>dialog/span>span classtoken punctuation>>/span>/span>/span>/code>div onclickcopied(this) data-codebutton onclick"chat.show()">open modal/button>dialog id"chat" style"width: 80dvw; height: 60dvh;"> form method"dialog" style"position: absolute; right: 10px"> button>โ/button> /form> ask-chat>/ask-chat>/dialog> classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> h2 idconfiguration>a classanchor aria-hiddentrue tabindex-1 href#configuration>span classocticon octicon-link>/span>/a>Configuration/h2> p>The configuration is validated automatically./p> p> If there are any errors, they will be logged to the browser console and ASK Frontend will abort. /p> h3 idrequired>a classanchor aria-hiddentrue tabindex-1 href#required>span classocticon octicon-link>/span>/a>Required/h3> p>There are two settings that are required for all configurations:/p> table> thead> tr> th>Setting/th> th>Description/th> /tr> /thead> tbody> tr> td>code>botID/code>/td> td>ID of the bot the chat should interact with./td> /tr> tr> td>code>token/code>/td> td>Token for authenticating to the ASK API./td> /tr> /tbody> /table> p> For special cases where a different means of authentication is used, code>token/code> can be set to code>null/code>. In this case, no authentication header will be sent by the SDK. /p> h3 idoptional>a classanchor aria-hiddentrue tabindex-1 href#optional>span classocticon octicon-link>/span>/a>Optional/h3> p> There are the following settings that allow for further customization of the configuration: /p> table> thead> tr> th>Setting/th> th>Description/th> /tr> /thead> tbody> tr> td>code>apiEndpoint/code>/td> td>Allow overriding the API Endpoint. This is useful for testing, or if you have your own ASK instance./td> /tr> tr> td>code>botName/code>/td> td>Override the name used to show the authorship of the bots chat messages./td> /tr> tr> td>code>chatTitle/code>/td> td>Set a different heading for the chat. If its code>null/code>, it will be hidden./td> /tr> tr> td>code>enableDebug/code>/td> td>If code>true/code>, its possible to reset the Bot to a certain state, and to see some current state debug information./td> /tr> tr> td>code>headers/code>/td> td>An object containing addional headers that should be sent to the API./td> /tr> tr> td>code>keepOpen/code>/td> td>If set to code>true/code> the modal or dialog (depending on code>modal/code>) stays open when navigating./td> /tr> tr> td>code>language/code>/td> td>Select a translation. Currently, code>de/code> and code>en/code> are supported./td> /tr> tr> td>code>languageSwitch/code>/td> td>If set to code>true/code>, show a language switcher./td> /tr> tr> td>code>linkMethod/code>/td> td>How to handle links. By default links are opened in the same tab. Other options are code>newTab/code> and code>callback/code>./td> /tr> tr> td>code>linkCallback/code>/td> td>JavaScript callback for link click. Required when code>linkMethod/code> is code>callback/code>. code>preventDefault()/code> is run before the callback./td> /tr> tr> td>code>modal/code>/td> td>Configure how code><ask-button>/code> shows the chat. By default it is shown in a drawer, with this set to code>true/code>, its shown as a modal./td> /tr> tr> td>code>stateIdentifier/code>/td> td>Override the identifier that is used to store the bots state. By setting the same identifier for different bots, we can make them share their state./td> /tr> tr> td>code>streamMessages/code>/td> td>If false, Server Sent Events (streaming of messages) will not be used./td> /tr> tr> td>code>style/code>/td> td>Injected CSS into the shadow DOM of the web component./td> /tr> /tbody> /table> h3 idexample-configuration>a classanchor aria-hiddentrue tabindex-1 href#example-configuration>span classocticon octicon-link>/span>/a>Example configuration/h3> pre classlanguage-js>code classlanguage-js code-highlight>span classcode-line line-number line1>span classtoken dom variable>window/span>span classtoken punctuation>./span>span classtoken method function property-access>askSetup/span>span classtoken punctuation>(/span>span classtoken punctuation>{/span>/span>span classcode-line line-number line2> span classtoken literal-property property>botID/span>span classtoken operator>:/span> span classtoken number>23/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line3> span classtoken literal-property property>token/span>span classtoken operator>:/span> span classtoken string>deadbeefdeadbeefdeadbeefdeadbeef/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line4> span classtoken literal-property property>apiEndpoint/span>span classtoken operator>:/span> span classtoken string>https://recbot-acme.reelport.com/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line5> span classtoken literal-property property>chatTitle/span>span classtoken operator>:/span> span classtoken string>Talk with ACME Bot/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line6> span classtoken literal-property property>language/span>span classtoken operator>:/span> span classtoken string>en/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line7> span classtoken literal-property property>languageSwitch/span>span classtoken operator>:/span> span classtoken boolean>true/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line8> span classtoken literal-property property>linkMethod/span>span classtoken operator>:/span> span classtoken string>callback/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line9> span classtoken function-variable function>linkCallback/span>span classtoken operator>:/span> span classtoken punctuation>(/span>span classtoken parameter>url/span>span classtoken punctuation>)/span> span classtoken arrow operator>>/span> span classtoken punctuation>{/span>/span>span classcode-line line-number line10> span classtoken dom variable>window/span>span classtoken punctuation>./span>span classtoken method function property-access>open/span>span classtoken punctuation>(/span>urlspan classtoken punctuation>,/span> span classtoken string>_blank/span>span classtoken punctuation>)/span>span classtoken punctuation>;/span>/span>span classcode-line line-number line11> span classtoken punctuation>}/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line12> span classtoken literal-property property>modal/span>span classtoken operator>:/span> span classtoken boolean>true/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line13> span classtoken literal-property property>style/span>span classtoken operator>:/span> span classtoken string>h3 {color: #88f;}/span>span classtoken punctuation>,/span>/span>span classcode-line line-number line14>span classtoken punctuation>}/span>span classtoken punctuation>)/span>span classtoken punctuation>;/span>/span>/code>div onclickcopied(this) data-codewindow.askSetup({ botID: 23, token: "deadbeefdeadbeefdeadbeefdeadbeef", apiEndpoint: "https://recbot-acme.reelport.com", chatTitle: "Talk with ACME Bot", language: "en", languageSwitch: true, linkMethod: "callback", linkCallback: (url) > { window.open(url, "_blank"); }, modal: true, style: "h3 {color: #88f;}",}); classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> h2 idcustomize-styles>a classanchor aria-hiddentrue tabindex-1 href#customize-styles>span classocticon octicon-link>/span>/a>Customize Styles/h2> p>ASK Frontend uses a hrefhttps://tailwindcss.com/>Tailwind CSS/a> with a hrefhttps://daisyui.com/>daisyUI/a> for styling./p> p>To customize the style, you can override CSS variables for the web component./p> p>All variables are evaluated in the a hrefhttps://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch>OKLCH color space/a> using the code>oklch()/code> function./p> p>A color picker for this space can be found a hrefhttps://oklch.com/>here/a>./p> p>An example configuring ASK Frontend to use a dark theme looks like this:/p> pre classlanguage-css>code classlanguage-css code-highlight>span classcode-line line-number line1>span classtoken selector>ask-button/span> span classtoken punctuation>{/span>/span>span classcode-line line-number line2> span classtoken variable>--a/span>span classtoken punctuation>:/span> span classtoken number>41.342/span>span classtoken unit>%/span> span classtoken number>20.732/span>span classtoken unit>%/span> span classtoken number>321.82/span>span classtoken punctuation>;/span> span classtoken comment>/* Accent color *//span>/span>span classcode-line line-number line3> span classtoken variable>--ac/span>span classtoken punctuation>:/span> span classtoken number>100/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken punctuation>;/span> span classtoken comment>/* Accent contrast *//span>/span>span classcode-line line-number line4>/span>span classcode-line line-number line5> span classtoken variable>--b1/span>span classtoken punctuation>:/span> span classtoken number>8/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken punctuation>;/span> span classtoken comment>/* Background 100 *//span>/span>span classcode-line line-number line6> span classtoken variable>--b2/span>span classtoken punctuation>:/span> span classtoken number>4/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken punctuation>;/span> span classtoken comment>/* Background 200 *//span>/span>span classcode-line line-number line7> span classtoken variable>--b3/span>span classtoken punctuation>:/span> span classtoken number>0/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken punctuation>;/span> span classtoken comment>/* Background 300 *//span>/span>span classcode-line line-number line8> span classtoken variable>--bc/span>span classtoken punctuation>:/span> span classtoken number>100/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken punctuation>;/span> span classtoken comment>/* Background contrast *//span>/span>span classcode-line line-number line9>/span>span classcode-line line-number line10> span classtoken variable>--n/span>span classtoken punctuation>:/span> span classtoken number>79.37/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken punctuation>;/span> span classtoken comment>/* Neutral color *//span>/span>span classcode-line line-number line11>/span>span classcode-line line-number line12> span classtoken variable>--p/span>span classtoken punctuation>:/span> span classtoken number>41.342/span>span classtoken unit>%/span> span classtoken number>20.732/span>span classtoken unit>%/span> span classtoken number>321.82/span>span classtoken punctuation>;/span> span classtoken comment>/* Primary color *//span>/span>span classcode-line line-number line13> span classtoken variable>--pc/span>span classtoken punctuation>:/span> span classtoken number>100/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken unit>%/span> span classtoken number>0/span>span classtoken punctuation>;/span> span classtoken comment>/* Primary contrast *//span>/span>span classcode-line line-number line14>/span>span classcode-line line-number line15> span classtoken variable>--s/span>span classtoken punctuation>:/span> span classtoken number>86.811/span>span classtoken unit>%/span> span classtoken number>44.384/span>span classtoken unit>%/span> span classtoken number>91.688/span>span classtoken punctuation>;/span> span classtoken comment>/* Secondary color *//span>/span>span classcode-line line-number line16> span classtoken variable>--sc/span>span classtoken punctuation>:/span> span classtoken number>13.189/span>span classtoken unit>%/span> span classtoken number>44.384/span>span classtoken unit>%/span> span classtoken number>91.688/span>span classtoken punctuation>;/span> span classtoken comment>/* Secondary foreground *//span>/span>span classcode-line line-number line17>span classtoken punctuation>}/span>/span>/code>div onclickcopied(this) data-codeask-button { --a: 41.342% 20.732% 321.82; /* Accent color */ --ac: 100% 0% 0; /* Accent contrast */ --b1: 8% 0% 0; /* Background 100 */ --b2: 4% 0% 0; /* Background 200 */ --b3: 0% 0% 0; /* Background 300 */ --bc: 100% 0% 0; /* Background contrast */ --n: 79.37% 0% 0; /* Neutral color */ --p: 41.342% 20.732% 321.82; /* Primary color */ --pc: 100% 0% 0; /* Primary contrast */ --s: 86.811% 44.384% 91.688; /* Secondary color */ --sc: 13.189% 44.384% 91.688; /* Secondary foreground */} classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> p>To get further information, or to explore themes, see daisyUIs a hrefhttps://daisyui.com/docs/colors/>color documentation/a>./p> p> For more detailed customization, the code>style/code> configuration option of the code>setup/code> function can also be used to inject styles directly into the shadow DOM. /p> h2 idchat-commands>a classanchor aria-hiddentrue tabindex-1 href#chat-commands>span classocticon octicon-link>/span>/a>Chat commands/h2> p>In the chat, users can enter code>/clear/code> to start a new conversation./p> h2 idstate>a classanchor aria-hiddentrue tabindex-1 href#state>span classocticon octicon-link>/span>/a>State/h2> p> ASK Frontend uses a hrefhttps://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage>localStorage/a> to store its state. /p> p>This means that you can use the following code to clear the bots history, e.g. when the user logs out:/p> pre classlanguage-js>code classlanguage-js code-highlight>span classcode-line line-number line1>span classtoken dom variable>localStorage/span>span classtoken punctuation>./span>span classtoken method function property-access>clear/span>span classtoken punctuation>(/span>span classtoken punctuation>)/span>span classtoken punctuation>;/span>/span>/code>div onclickcopied(this) data-codelocalStorage.clear(); classcopied>svg classocticon-copy aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z>/path>path fill-ruleevenodd dM5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z>/path>/svg>svg classocticon-check aria-hiddentrue viewBox0 0 16 16 fillcurrentColor height12 width12>path fill-ruleevenodd dM13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z>/path>/svg>/div>/pre> h1 idadvanced-usage>a classanchor aria-hiddentrue tabindex-1 href#advanced-usage>span classocticon octicon-link>/span>/a>Advanced usage/h1> p>If more detailed settings are required, there are advanced ways to use the ASK Frontend, see the a hrefapi-docs/index.html>regarding documentation/a>./p> script>/*! @uiw/copy-to-clipboard v1.0.12 | MIT (c) 2021 Kenny Wang | https://github.com/uiwjs/copy-to-clipboard.git */!function(e,t){objecttypeof exports&&undefined!typeof module?module.exportst():functiontypeof define&&define.amd?define(t):(eundefined!typeof globalThis?globalThis:e||self).copyTextToClipboardt()}(this,(function(){use strict;return function(e,t){const odocument.createElement(textarea);o.valuee,o.setAttribute(readonly,),o.style{position:absolute,left:-9999px},document.body.appendChild(o);const ndocument.getSelection().rangeCount>0&&document.getSelection().getRangeAt(0);o.select();let c!1;try{c!!document.execCommand(copy)}catch(e){c!1}document.body.removeChild(o),n&&document.getSelection&&(document.getSelection().removeAllRanges(),document.getSelection().addRange(n)),t&&t(c)}}));function copied(target, str) { target.classList.add(active); copyTextToClipboard(target.dataset.code, function() { setTimeout(() > { target.classList.remove(active); }, 2000); });}/script> /div>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]