# JavaScript in custom panel field

**URL:** <https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265>\
**Category:** Questions\
**Tags:** v2\
**Created:** [February 8, 2016, 5:53am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265 "2016-02-08T05:53:16Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![heyallan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/heyallan/32/829_2.png) [@heyallan](https://forum.getkirby.com/u/heyallan)\
**Post date:** [February 8, 2016, 5:53am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/1 "2016-02-08T05:53:16Z")

</div>

Can we add JS snippets to panel field, **not to hack the panel** , but to add google analytics, mixpanel, etc. from panel then access from templates (?)

---

<div class="post-metadata">

**Author:** ![molocLab](https://avatars.discourse-cdn.com/v4/letter/m/b5e925/32.png) [@molocLab](https://forum.getkirby.com/u/molocLab)\
**Post date:** [February 8, 2016, 8:50am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/2 "2016-02-08T08:50:48Z")

</div>

Have a look [here](https://getkirby.com/docs/panel/developers/custom-form-fields#adding-field-assets).

---

<div class="post-metadata">

**Author:** ![heyallan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/heyallan/32/829_2.png) [@heyallan](https://forum.getkirby.com/u/heyallan)\
**Post date:** [February 8, 2016, 9:04am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/3 "2016-02-08T09:04:00Z")

</div>

Thank you. Not what I’m asking for.

---

<div class="post-metadata">

**Author:** ![jbeyerstedt](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jbeyerstedt/32/3976_2.png) [@jbeyerstedt](https://forum.getkirby.com/u/jbeyerstedt)\
**Post date:** [February 8, 2016, 9:19am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/4 "2016-02-08T09:19:13Z")

</div>

Of course you can add a normal text field in your site´s settings (`site.php` blueprint), write code into it and access this field, as any other, from your template. If you don´t parse this as kirbytext, the content should be the same.

Anyway, I think, if would be a much cleaner solution to add code for all templates in a snippet (e.g. header / footer / scripts before end) and set the tracking ID in the `config.php` (so you can disable analytics on your localhost development environment easily, if you use this) or in your site´s settings, so everyone can edit them.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 8, 2016, 9:22am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/5 "2016-02-08T09:22:05Z")

</div>

For an example, see this solution: [https://getkirby.com/docs/solutions/piwik](https://getkirby.com/docs/solutions/piwik)

---

<div class="post-metadata">

**Author:** ![heyallan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/heyallan/32/829_2.png) [@heyallan](https://forum.getkirby.com/u/heyallan)\
**Post date:** [February 8, 2016, 9:53am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/6 "2016-02-08T09:53:31Z")

</div>

Thank you.

- Some scripts (like mixpanel’s) are unique in every case (no generic formula here)
- I want to let the user customize the snippet as needed
- I don’t want to hard-code it into the template

I thought a panel field would be great alternative this time.

---

<div class="post-metadata">

**Author:** ![heyallan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/heyallan/32/829_2.png) [@heyallan](https://forum.getkirby.com/u/heyallan)\
**Post date:** [February 8, 2016, 10:06am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/7 "2016-02-08T10:06:38Z")

</div>

> [@jbeyerstedt](#):
>
> Of course you can add a normal text field in your site´s settings (site.php blueprint), write code into it and access this field, as any other, from your template. If you don´t parse this as kirbytext, the content should be the same.

**So far panel fields don’t accept javascript in any form**

> [@jbeyerstedt](#):
>
> Anyway, I think, if would be a much cleaner solution to add code for all templates in a snippet (e.g. header / footer / scripts before end) and set the tracking ID in the config.php (so you can disable analytics on your localhost development environment easily, if you use this) or in your site´s settings, so everyone can edit them.

**Actually I’m exploring panel fields as an alternative to that.**  
But you’re right in general, thank you.

---

<div class="post-metadata">

**Author:** ![jbeyerstedt](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jbeyerstedt/32/3976_2.png) [@jbeyerstedt](https://forum.getkirby.com/u/jbeyerstedt)\
**Post date:** [February 8, 2016, 10:27am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/8 "2016-02-08T10:27:56Z")

</div>

> [@heyallan](#):
>
> So far panel fields don’t accept javascript in any form

I had no problem adding this:

```auto
<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//{$PIWIK_URL}/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', {$IDSITE}]);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Piwik Code -->

```

or even just the pure script (without the html `<script>` tags).  
I used a standard `textarea` panel field and got the text to my website even with `$field->kirbytext()`.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 8, 2016, 10:31am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/9 "2016-02-08T10:31:17Z")

</div>

@jbeyerstedt is right, adding script to a field is no problem.

---

<div class="post-metadata">

**Author:** ![heyallan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/heyallan/32/829_2.png) [@heyallan](https://forum.getkirby.com/u/heyallan)\
**Post date:** [February 8, 2016, 7:26pm UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/11 "2016-02-08T19:26:07Z")

</div>

Nop.

**On localhost:**

- It works seamlessly

**On test server:**

- When I put JS into the field and hit “save”, it keeps loading and loading, but it never resolves
- It saves HTML/CSS with no problem (but I don’t need those)
- It’s the same for textarea and custom field type, so I guess my custom field was not the problem

**My panel field:**

![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/0/061ee8f7e63532af420e0faf40135cee6a500da0.png)

**Console Error:**

(This error is only thrown if I put JS into the panel field)

```auto
404 (Not Found) panel.min.js?v=2.2.3:5

V.cors.t.crossDomain.send @ panel.min.js?v=2.2.3:5
K.extend.ajax @ panel.min.js?v=2.2.3:5
K.(anonymous function) @ panel.min.js?v=2.2.3:5
(anonymous function) @ panel.min.js?v=2.2.3:7
K.event.dispatch @ panel.min.js?v=2.2.3:4
g.handle @ panel.min.js?v=2.2.3:4

```

---

<div class="post-metadata">

**Author:** ![jbeyerstedt](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jbeyerstedt/32/3976_2.png) [@jbeyerstedt](https://forum.getkirby.com/u/jbeyerstedt)\
**Post date:** [February 9, 2016, 1:01pm UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/12 "2016-02-09T13:01:53Z")

</div>

That´s interesting. I tested it on my web server ([uberspace.de](http://uberspace.de), CentOS) as well, and it was no problem.  
My next step to isolate the problem would be, to install a new starter kit and try saving this text in there. Could you try this?

Or do you have solved this problem (because this thread is marked as solved)?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 9, 2016, 1:06pm UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/13 "2016-02-09T13:06:20Z")

</div>

No, I marked that as “solved”, because I think it should work. Also tested this on my remote server without problems.

I wonder if the issue is server specific somehow, not allowing to post scripts.

---

<div class="post-metadata">

**Author:** ![heyallan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/heyallan/32/829_2.png) [@heyallan](https://forum.getkirby.com/u/heyallan)\
**Post date:** [February 12, 2016, 1:20am UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/14 "2016-02-12T01:20:01Z")

</div>

Environment test:

- localhost: It works anyway all the time
- remote server: it works from content pages, **but not from site options page**

So yes, textarea accepts JS, but not from site options  
Maybe the server is not the problem  
**Maybe I messed up site options** , but don’t know where (?)  
I will test with a new installation

@texnixe, @jbeyerstedt, thank you very much.

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 5:00pm UTC](https://forum.getkirby.com/t/javascript-in-custom-panel-field/3265/15 "2025-02-06T17:00:12Z")

</div>