Add Custom Code to Head

Queries and Resources
#1

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

#2

Hello Lars!

Thanks for writing in. :grinning_face_with_smiling_eyes:

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!

#3

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.

#4

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

#5

@jSims

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

#6

Ah. Thanks for sharing. Hmm. Do you think this could be imported as a library? (using the resource I shared initially)

#7

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

#8

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

#9

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:

  1. Integrating a script in the head tag and then its just possible to open the profile with a link as a pop-up
  2. Integrating a script for the profile right in the body of a page. I tried this with custom components but failed.

Thanks, lars

#10

Hey @lars_hofstetter, unfortunately, I don't believe this is possible in Retool at the moment :slightly_frowning_face: 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!

1638×448 55 KB

Would you mind changing this to a feature request so other users can chime in on the need/use cases for this functionality?

#11

@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!

#12

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.

#13

WOW. Didn't think about that.
Wrapping in frame in html.
That solves my use case. Also looking into the wizard component.

1 Like
#14

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..

#15

Hey @mopkaloppt!

Retool still doesn't support adding scripts in the top-level head tag, but we can certainly explore workarounds with you :eyes:

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?

#16

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.

#17

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?