Wasp•2mo ago

Integrate 3rd-party <script> objects

Certain 3rd party integrations require adding a <script> object to the index.html file. How can I do this with Wasp, given that the index.html file is generated dynamically?

2 Replies

kapa.ai•2mo ago

Hi @Anima. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To integrate third-party <script> objects in a Wasp application, you can use the head field in your app declaration within the main.wasp file. This allows you to add custom elements to the <head> section of your generated HTML file. Here's how you can do it: 1. Open your main.wasp file. 2. Locate your app declaration. 3. Add or modify the head field to include your third-party script. Here's an example of how to add a script to your app:

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  head: [
    "<script src=\"<https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js\"></script>">
  ]
}

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  head: [
    "<script src=\"<https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js\"></script>">
  ]
}

You can add multiple scripts or other HTML elements by including more items in the head array:

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  head: [
    "<script src=\"<https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js\"></script>",>
    "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />",
    "<meta name=\"viewport\" content=\"minimum-scale=1, initial-scale=1, width=device-width\" />"
  ]
}

app myApp {
  wasp: {
    version: "^0.13.0"
  },
  title: "My App",
  head: [
    "<script src=\"<https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js\"></script>",>
    "<link rel=\"stylesheet\" href=\"<https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\"> />",
    "<meta name=\"viewport\" content=\"minimum-scale=1, initial-scale=1, width=device-width\" />"
  ]
}

This approach allows you to add third-party scripts and other elements to your app's HTML without directly modifying the dynamically generated index.html file. Source: Customizing the App (https://wasp-lang.dev/docs/project/customizing-app) Remember that this method injects the scripts into every page of your app. If you need more granular control or page-specific scripts, you might need to explore alternative solutions or wait for more advanced features in future Wasp versions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Anima, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•2mo ago

Good bot

Gaming

Programming

Integrate 3rd-party <script> objects