Configuration Examples
Here are some example configurations. These can be copy/pasted directly into the code of an existing web page once SDK_API_URL is replaced with a configured SDK endpoint. (Note that the configured SDK endpoint must be formatted as a string.) For more on how to configure an SDK endpoint so it refers to your Airkit App, see the SDK Quickstart:
Minimum Inline
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Airkit web SDK</title>
</head>
<body>
<div>
<button id="smb">Send message to Airkit app</button>
<div id="rm"></div>
</div>
<div id="airkit-sdk"></div>
<script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
<script>
const sdk = new window.AirkitWebSDK({ renderMode: "inline" })
sdk.render({ url: SDK_API_URL })
sdk.on("outgoing", (event) => {
const container = document.getElementById("rm")
container.innerHTML = JSON.stringify(event.data)
})
const button = document.getElementById("smb")
button.addEventListener("click", () => {
sdk.dispatch({
eventSourceKey: "incoming",
data: { data: `Message from web sdk send at ${new Date()}` },
})
})
</script>
</body>
</html>Full Inline
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Airkit web SDK</title>
</head>
<body>
<div>
<button id="smb">Send message to Airkit app</button>
<div id="rm"></div>
</div>
<div id="app"></div>
<script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
<script>
const sdk = new window.AirkitWebSDK({
instanceId: "full_inline",
iframeConfig: {
class: "iframe_class",
id: "iframe_id",
name: "iframe_name",
style: {
width: "100%",
height: "100%",
margin: "0px auto",
border: "0px",
},
aria: {
"aria-label": "Airkit Web SDK",
},
},
renderMode: "inline",
renderConfig: {
containerStyle: {
width: "800px",
height: "700px",
textAlign: "center",
border: "1px solid #ff4e83",
backgroundColor: "transparent",
overflow: "hidden",
},
},
testIdPrefix: "id",
classNamePrefix: "class",
headerConfig: {
headerStyle: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexWrap: "nowrap",
padding: "8px",
backgroundColor: "#ff4e83",
},
trademarkBoxStyle: {
display: "flex",
alignItems: "center",
gap: "8px",
},
logo: {
src: '.../airkit_logo.svg',
style: {
width: "24px",
height: "24px",
marginRight: "4px",
},
buttonAria: {
role: "presentation",
},
imageAria: {
role: "presentation",
},
},
typography: {
text: "Powered by AirKit Web SDK",
style: {
color: "#ffffff",
fontFamily: "Helvetica",
fontSize: "12px",
},
},
},
})
sdk.render({
url: SDK_API_URL,
container: document.getElementById("app"),
})
sdk.on("outgoing", (event) => {
const container = document.getElementById("rm")
container.innerHTML = JSON.stringify(event.data)
})
const button = document.getElementById("smb")
button.addEventListener("click", () => {
sdk.dispatch({
eventSourceKey: "incoming",
data: { data: `Message from web sdk send at ${new Date()}` },
})
})
</script>
</body>
</html>Minimum Popup
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Airkit web SDK</title>
</head>
<body>
<div>
<button id="smb">Send message to Airkit app</button>
<div id="rm"></div>
</div>
<div id="airkit-sdk"></div>
<script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
<script>
const sdk = new window.AirkitWebSDK({})
sdk.render({ url: SDK_API_URL })
sdk.on("outgoing", (event) => {
const container = document.getElementById("rm")
container.innerHTML = JSON.stringify(event.data)
})
const button = document.getElementById("smb")
button.addEventListener("click", () => {
sdk.dispatch({
eventSourceKey: "incoming",
data: { data: `Message from web sdk send at ${new Date()}` },
})
})
</script>
</body>
</html>Full Popup
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Airkit web SDK</title>
</head>
<body>
<div>
<button id="smb">Send message to Airkit app</button>
<div id="rm"></div>
</div>
<div id="airkit-sdk"></div>
<script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
<script>
const sdk = new window.AirkitWebSDK({
instanceId: "full_popup",
iframeConfig: {
class: "iframe_class",
id: "iframe_id",
name: "iframe_name",
style: {
width: "100%",
height: "100%",
border: "0px",
borderBottomRightRadius: "10px",
borderBottomLeftRadius: "10px",
webkitBorderBottomRightRadius: "10px",
webkitBorderBottomLeftRadius: "10px",
},
aria: {
"aria-label": "Airkit Web SDK",
},
},
renderConfig: {
containerStyle: {
position: "fixed",
bottom: "20px",
right: "50%",
zIndex: "1000",
margin: "0px",
minHeight: "60px",
minWidth: "60px",
},
button: {
openIconSrc: '.../airkit_chat.png',
closeIconSrc: '.../airkit_close.png',
hoverColor: "#ff4e8357",
buttonStyle: {
width: "160px",
height: "61px",
borderRadius: "16px",
position: "absolute",
display: "flex",
alignItems: "center",
cursor: "pointer",
justifyContent: "center",
top: "0px",
bottom: "0px",
border: "1px solid #f94e83",
},
iconStyle: {
width: "58px",
height: "58px",
},
buttonAria: {
role: "button",
"aria-label": "Click to toggle popup panel",
},
iconAria: {
role: "presentation",
},
typography: {
openText: "Click to close",
closeText: "Click to open",
style: {
color: "#f94e83",
fontFamily: "Helvetica",
fontSize: "16px",
marginLeft: "4px",
},
hoverColor: "#ffffff",
},
},
panel: {
width: "800px",
height: "700px",
style: {
position: "absolute",
bottom: "70px",
right: "-400px",
webkitBorderRadius: "10px",
borderRadius: "10px",
webkitBoxShadow: "#938b8d85 0px 1px 10px 2px",
boxShadow: "#938b8d85 0px 1px 10px 2px",
transition: "all 300ms linear 0s",
overflow: "hidden",
zIndex: "1001",
},
},
},
testIdPrefix: "id",
classNamePrefix: "class",
headerConfig: {
headerStyle: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexWrap: "nowrap",
padding: "8px",
backgroundColor: "#ff4e83",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
webkitBorderTopRightRadius: "10px",
webkitBorderTopLeftRadius: "10px",
},
trademarkBoxStyle: {
display: "flex",
alignItems: "center",
gap: "8px",
},
actionsBoxStyle: {
display: "flex",
alignItems: "center",
gap: "4px",
},
logo: {
src: '.../airkit_logo.svg',
style: {
width: "24px",
height: "24px",
marginRight: "4px",
},
buttonAria: {
role: "presentation",
},
imageAria: {
role: "presentation",
},
},
typography: {
text: "Powered by AirKit Web SDK",
style: {
color: "#ffffff",
fontFamily: "Helvetica",
fontSize: "12px",
},
},
close: {
src: '.../airkit_close.png',
imageStyle: {
width: "12px",
height: "12px",
margin: "0 auto",
},
buttonStyle: {
width: "28px",
height: "28px",
borderRadius: "8px",
webkitBorderRadius: "8px",
transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
display: "flex",
alignItems: "center",
cursor: "pointer",
},
hoverColor: "#e52b63",
buttonAria: {
role: "button",
"aria-label": "Close popup panel",
},
imageAria: {
role: "presentation",
},
},
minimize: {
src: '.../minimize.svg',
imageStyle: {
width: "12px",
height: "12px",
margin: "0 auto",
},
buttonStyle: {
width: "28px",
height: "28px",
borderRadius: "8px",
webkitBorderRadius: "8px",
transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
display: "flex",
alignItems: "center",
cursor: "pointer",
},
hoverColor: "#e52b63",
buttonAria: {
role: "button",
"aria-label": "Minimize popup panel",
},
imageAria: {
role: "presentation",
},
},
},
})
sdk.render({ url: SDK_API_URL })
sdk.on("outgoing", (event) => {
const container = document.getElementById("rm")
container.innerHTML = JSON.stringify(event.data)
})
const button = document.getElementById("smb")
button.addEventListener("click", () => {
sdk.dispatch({
eventSourceKey: "incoming",
data: { data: `Message from web sdk send at ${new Date()}` },
})
})
</script>
</body>
</html>Minimum Modal
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Airkit web SDK</title>
</head>
<body>
<div>
<button id="smb">Send message to Airkit app</button>
<div id="rm"></div>
</div>
<div id="airkit-sdk"></div>
<script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
<script>
const sdk = new window.AirkitWebSDK({ renderMode: "modal" })
sdk.render({ url: SDK_API_URL })
sdk.on("outgoing", (event) => {
const container = document.getElementById("rm")
container.innerHTML = JSON.stringify(event.data)
})
const button = document.getElementById("smb")
button.addEventListener("click", () => {
sdk.dispatch({
eventSourceKey: "incoming",
data: { data: `Message from web sdk send at ${new Date()}` },
})
})
</script>
</body>
</html>
Full Modal
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Airkit web SDK</title>
</head>
<body>
<div>
<button id="smb">Send message to Airkit app</button>
<div id="rm"></div>
</div>
<div id="airkit-sdk"></div>
<script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
<script>
const sdk = new window.AirkitWebSDK({
instanceId: "full_modal",
iframeConfig: {
class: "iframe_class",
id: "iframe_id",
name: "iframe_name",
style: {
width: "100%",
height: "100%",
border: "0px",
borderBottomRightRadius: "10px",
borderBottomLeftRadius: "10px",
webkitBorderBottomRightRadius: "10px",
webkitBorderBottomLeftRadius: "10px",
},
aria: {
"aria-label": "Airkit Web SDK",
},
},
renderMode: "modal",
renderConfig: {
containerStyle: {
position: "fixed",
inset: "0px",
zIndex: "1000",
height: "100%",
width: "100%",
backgroundColor: "#5e5c5c45",
display: "flex",
justifyContent: "space-around",
alignItems: "center",
},
button: {
openIconSrc: '.../airkit_chat.png',
closeIconSrc: '.../airkit_close.png',
hoverColor: "#ff4e8357",
buttonStyle: {
width: "160px",
height: "61px",
borderRadius: "16px",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
top: "0px",
bottom: "0px",
border: "1px solid #f94e83",
},
buttonAria: {
role: "button",
"aria-label": "Click to toggle popup panel",
},
iconStyle: {
width: "58px",
height: "58px",
},
iconAria: {
role: "presentation",
},
typography: {
openText: "Click to close",
closeText: "Click to open",
style: {
color: "#f94e83",
fontFamily: "Helvetica",
fontSize: "16px",
marginLeft: "4px",
},
hoverColor: "#ffffff",
},
},
panel: {
width: "800px",
height: "600px",
style: {
webkitBorderRadius: "10px",
borderRadius: "10px",
webkitBoxShadow: "#938b8d85 0px 1px 10px 2px",
boxShadow: "#938b8d85 0px 1px 10px 2px",
transition: "all 300ms linear 0s",
overflow: "hidden",
zIndex: "1001",
backgroundColor: "#fff",
},
},
},
testIdPrefix: "id",
classNamePrefix: "class",
headerConfig: {
headerStyle: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexWrap: "nowrap",
padding: "8px",
backgroundColor: "#ff4e83",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
webkitBorderTopRightRadius: "10px",
webkitBorderTopLeftRadius: "10px",
},
trademarkBoxStyle: {
display: "flex",
alignItems: "center",
gap: "8px",
},
actionsBoxStyle: {
display: "flex",
alignItems: "center",
gap: "4px",
},
logo: {
src: LogoIcon,
style: {
width: "24px",
height: "24px",
marginRight: "4px",
},
buttonAria: {
role: "presentation",
},
imageAria: {
role: "presentation",
},
},
typography: {
text: "Powered by AirKit Web SDK",
style: {
color: "#ffffff",
fontFamily: "Helvetica",
fontSize: "12px",
},
},
close: {
src: CloseIcon,
imageStyle: {
width: "12px",
height: "12px",
margin: "0 auto",
},
buttonStyle: {
width: "28px",
height: "28px",
borderRadius: "8px",
webkitBorderRadius: "8px",
transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
display: "flex",
alignItems: "center",
cursor: "pointer",
},
hoverColor: "#e52b63",
buttonAria: {
role: "button",
"aria-label": "Close popup panel",
},
imageAria: {
role: "presentation",
},
},
},
})
sdk.render({ url: SDK_API_URL, renderMode: "modal" })
sdk.on("outgoing", (event) => {
const container = document.getElementById("rm")
container.innerHTML = JSON.stringify(event.data)
})
const button = document.getElementById("smb")
button.addEventListener("click", () => {
sdk.dispatch({
eventSourceKey: "incoming",
data: { data: `Message from web sdk send at ${new Date()}` },
})
})
</script>
</body>
</html>Last updated