Enable Smooth Spacebar Typing in Pickaxe on Genially

Community Scripts
, ,
1

Fix: Spacebar Doesn’t Type Inside Pickaxe on Genially (script embed)

Original Post: “Chatbot Pickaxe in Genially: script problem with spacebar”

Hi everyone!!

@nivek Was the first on this one, but I wanted to add a post here incase other users found it valuable :flexed_biceps:

Some Genially pages capture the Space key for page controls (play/pause/scroll). When you use a script embed, that can prevent the chat’s textbox from getting the space keystroke. So pressing space either scrolls the page or does nothing.

Below are two safe fixes you can paste into your studio:

  • Quick Fix: Intercept Space only when the Pickaxe input is focused (most users)
  • Advanced Fix: Works well with multiple embeds or dynamic pages
  • Alternative: Switch to iframe embed (no code, fully isolated)

If you embed via iframe, this issue doesn’t occur because the iframe sandboxes keyboard events. Use the snippets below only for script embeds.

Quick Fix (recommended)

Intercept Space in the capture phase and only when focus is inside the Pickaxe input. This prevents Genially from hijacking the key while leaving the rest of the page alone.

<!-- Your Pickaxe script embed -->
<script src="https://studio.pickaxe.co/api/embed/bundle.js" defer></script>

<!-- Spacebar guard for Genially (namespaced, safe) -->
<script>
(() => {
  if (window.__PICKAXE_SPACE_GUARD__) return;
  window.__PICKAXE_SPACE_GUARD__ = true;

  const ROOT_SEL = '[data-pickaxe-embed]';

  function inChatInput(target) {
    const root = document.querySelector(ROOT_SEL);
    if (!root) return false;
    const input = root.querySelector('textarea, [contenteditable="true"]');
    if (!input) return false;
    const active = document.activeElement;
    // event target or focused element is chat input
    return input === target || input.contains(target) || input === active || input.contains(active);
  }

  // capture phase so we run before genially's handlers
  function onKeyDownCapture(e) {
    const isSpace = e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space';
    if (!isSpace) return;
    if (!inChatInput(e.target)) return;
    // keep the space for typing and stop the host from hijacking it!!
    e.stopPropagation();
    // if input isn't focused, prevent page scroll/play
    if (!document.activeElement || !document.activeElement.matches('textarea, [contenteditable="true"]')) {
      e.preventDefault();
    }
  }

  window.addEventListener('keydown', onKeyDownCapture, { capture: true });

  // optional: when user clicks inside the chat ensure focus lands on the input
  document.addEventListener('click', (ev) => {
    const root = ev.target.closest?.(ROOT_SEL);
    if (!root) return;
    root.querySelector('textarea, [contenteditable="true"]')?.focus?.();
  }, { passive: true });
})();
</script>

Why this works

  • Runs before Genially’s page handlers (capture phase).
  • Only intercepts the key inside the chat so no global side effects.
  • Preserves normal typing while preventing page-level scroll/play.

Advanced Fix (multi-embed / highly dynamic pages)

If you have multiple Pickaxes on the same page or the DOM changes a lot, scope the check to whichever chat input is currently focused.

<script>
(() => {
  if (window.__PICKAXE_SPACE_ADV__) return;
  window.__PICKAXE_SPACE_ADV__ = true;

  const roots = () => Array.from(document.querySelectorAll('[data-pickaxe-embed]'));

  function focusedChatInput() {
    const active = document.activeElement;
    if (!active) return null;
    for (const root of roots()) {
      const input = root.querySelector('textarea, [contenteditable="true"]');
      if (input && (input === active || input.contains(active))) return input;
    }
    return null;
  }

  function onKeyDownCapture(e) {
    const isSpace = e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space';
    if (!isSpace) return;
    const input = focusedChatInput();
    if (!input) return; // not in a chat input; let Genially handle it
    e.stopPropagation();
    // if somehow not focused prevent default to avoid page scroll/play
    if (document.activeElement !== input) e.preventDefault();
  }

  window.addEventListener('keydown', onKeyDownCapture, { capture: true });

  // keep queries fresh as DOM changes
  new MutationObserver(() => {}).observe(document.documentElement, { childList: true, subtree: true });
})();
</script>

Easiest Alternative: Switch to Iframe Embed

If you don’t need page-side scripting (custom chips, PickaxeConfig, etc.), switch the embed type to Iframe. The browser isolates keyboard events inside the iframe, so Genially won’t interfere at all.

  • Pros: zero code, no key conflicts.
  • Cons: parent page JS can’t prefill or listen to the chat internals.

Troubleshooting

Space still scrolls the page:

  • Confirm you’re using a script embed.
  • Make sure the listener is added with { capture: true }.
  • Check the browser console for errors (CSP may block inline scripts; if so, put the code in an external .js file).
    Typing still inserts no space:
  • Ensure the chat’s textarea has focus; the Quick Fix includes a click-to-focus helper.
  • Some themes require an extra click inside the field the first time.
    Other keys misbehave:
  • You can extend the same handler for Enter, etc., if your host page intercepts those too.

Credit & context