App scripts 🔒

These scripts are injected into your app's server-side rendered HTML skeleton and take effect immediately. This allows them to override or manipulate any part of your app.

Unlocking app scripts

You must upgrade to an enterprise plan to unlock app script functionality. For more information, contact our sales team here.

Setup

You can configure app scripts in your app settings under a page titled "App Scripts."

You can add a new script by clicking the "Add script" button in the top right of the table. The configuration of each script is broken down into 3 key elements;

• The Name field is a descriptive title of what your script does
• The Location field is a options picker that will control whether this script is added to the head of the page or the body
• The HTML field is where you can add the content to the head or body of your app. You can include:
  • JavaScript scripts
  • CSS styles
  • External style sheets
  • Additional JavaScript references

You can save your app script configurations once you've filled out the fields.

To view your saved scripts, return to the "App Scripts" page. Click a row to open the form with pre-filled information. You can then save, cancel, or delete the script as needed.

Examples

Changing font to inter

• Add the relevant style sheets
• Then override the font with the below inline styling

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

<style>
  html * {
    font-family: Inter, sans-serif !important;
  }
</style>

Adding a chatbot

This requires two scripts,

• A script in the head that will link to the chatbot's JS file.

  HTML

  <script async defer type="module" src="https://unpkg.com/@pragmasoft-
  ukraine/kite-chat-component/dist/kite-chat-component.mjs"/>
  

  

• A script in the body that will add the following web component in the body to render the chatbot.

  HTML

  <kite-chat></kite-chat>
  

  

Result