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:

<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>
<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>
<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>
<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: "61px",
                height: "61px",
                borderRadius: "50%",
                position: "absolute",
                display: "flex",
                alignItems: "center",
                cursor: "pointer",
                justifyContent: "center",
                top: "0px",
                bottom: "0px",
              },
              iconStyle: {
                width: "58px",
                height: "58px",
              },
              buttonAria: {
                role: "button",
                "aria-label": "Click to toggle popup panel",
              },
              iconAria: {
                role: "presentation",
              },
            },
            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>