Hello everyone,
I need to add some custom code / script to the head section of my app. Is this possible?
For example in webflow there is a section "custom code" to add such code.
Thank you for your help,
Lars
Hello Lars!
Thanks for writing in. 
I'm not entirely sure I know what you're referring to. So, with Retool we have custom components:
https://docs.retool.com/docs/custom-react-components
We can also make use of external libraries and NPM Modules:
https://docs.retool.com/docs/custom-js-code#custom-javascript-libraries--npm-modules
Could you let me know a little bit more about what you're trying to do?
Thanks!
Hi @jSims Thanks for the fast answer. Basically I want to add a script for example from weglot.
In Webflow it works like in the following picture/link: https://weglot.com/wp-content/uploads/20190419114953/Webflow-translate-JavaScript-snippet.gif
The code needs to get in to the tag that a website has.
Does this make sense?
I also have other ideas not just weglot, but just need to know how I can do this in general.
Thank you Lars!
So, could you explain your end goal for this use case? Are you trying to add a script tag or something else? Would global JavaScript work for this?
Hope to get this solved for you soon!
John
The goal is to integrate another service. So for example the script from the tool outseta will look like the following
<script>
var o_options = {
domain: '10times.outseta.com'
};
</script>
<script src="https://cdn.outseta.com/outseta.min.js"
data-options="o_options">
</script>
And this is written on how to do it: "Add this in the head section of every page on your website."
Does that help? Thanks
Ah. Thanks for sharing. Hmm. Do you think this could be imported as a library? (using the resource I shared initially)
I tried to add it like its explained in the documentation and added it in the javascript section. But It didn't work. It needs to go into the tag and I guess if you add something there it doesn't do that. Any other ideas? @jSims
Hello again!
I was looking into Outseta, and I think the best way for Retool to connect is via API. Could you let me know what you're hoping to use Outseta for? If you're trying to simply access data then I think connecting via API is the best way to go. If not, we might have to keep troubleshooting!
I found this guide just in case you needed it!
https://go.outseta.com/support/kb/articles/d1QpxQE7/how-to-integrate-with-outseta-s-rest-api
John
Hi John,
I think via API is not optimal here. I'm trying to integrate the profile system from outseta.
Here you can see how its done: Outseta Knowledge Base
When you watch the video its explained very easily.
There are two ways:
- Integrating a script in the head tag and then its just possible to open the profile with a link as a pop-up
- Integrating a script for the profile right in the body of a page. I tried this with custom components but failed.
Thanks, lars
Hey @lars_hofstetter, unfortunately, I don't believe this is possible in Retool at the moment 
There's no way to add scripts to the head tag of Retool apps and all preloaded JS libraries run in a Sandbox on Retool. I wish I had better news for you!
Would you mind changing this to a feature request so other users can chime in on the need/use cases for this functionality?
@everett_smith this answer just gave me high blood pressure.
Tried in vain to integrate a script tag into the head tag
We needed to use pendo or candu for product adoption strategy and user on-boarding.
Sad and Glad to know it is not possible in retool.
How did you'all do it in in the onboarding retool app ?
Retool Rocks!
Hey @lars_hofstetter @chi cool to see the interest in this. As a potential workaround, I believe you would need to create a wrapper page that loads the custom code, and has Retool embedded in it, so that both are in the same "page" so to speak. Maybe give that a try and see if it does the trick? I also agree with @everett_smith that turning this into a Feature Request post will allow Retool teams to track the community's interest in making this possible without needing to create a wrapper page.
WOW. Didn't think about that.
Wrapping in frame in html.
That solves my use case. Also looking into the wizard component.
1 Like
So has the Head been added to Retool yet? I need to do the same thing as the OP.
Tried the complicated wrapper page like what @kbn suggested but it didn't work. I guess I did something wrong..
Hey @mopkaloppt!
Retool still doesn't support adding scripts in the top-level head tag, but we can certainly explore workarounds with you 
Are you also using Weglot or is it a different service/script?
Would you mind sharing a bit more about what you've tried so far?
I chatted with support. Turns out what @kbn suggested wasn't what I needed.
I was trying to add flat-icons for social media to the footer of my app. Needed to load flat-icons from the source and the source must be added to tag at the .
So I haven't managed to do that, because I haven't received the message for how to do it from support since.
Ahh I see. It seems like custom component might be worth a try here. It doesn't have to be a React component necessarily, see this section of the docs. I would try copying the all of HTML you're currently using directly into the custom component and then experimenting with which of the permissions need to be enabled in order for it to work:
If the script absolutely has to be loaded into the header this may not work since the custom component will load the script into the body of the iframe but that is often sufficient. Can you let me know how it goes?
Reviving this thread - is this still not possible?
We're looking to add a script from Freshpaint into the section for better event tracking within the app.
Any ideas/workarounds?
Hi @shawnhoffman!
I looked into how we were able to do this with a different library (Iconify), our Custom Component worked great:
We need to add the script tag into the body:
In this case, the span was provided by Iconify:
Let us know if this approach works with Freshpaint! 
Hey Paulo, appreciate you following up.
Tried a similar approach and was able to get it "to work" within the constraints of the iframe it's loaded into.
In this case, Freshpaint is used to help track user behavior, such as clicks on buttons, clicks on links, viewing different pages within an app, etc.
By loading into the iframe of a custom component, the only thing it could track was a page view of that component itself.
I've been told the only workaround is to basically attach an API call as an event handler to each button/link we'd want to track clicks on.