Create embeddable widget with turbo

1

Hello,

Wondering whether anybody has created an embeddable widget (something similar to Embed the Zendesk Web Widget) for users to put inside their own websites using turbo/stimulus. Specifically, requiring multiple pages inside the “widget”.

Obvious approach I think is to use an iframe to embed our “site” inside the users site. Is using a web component wrapper a possible alternative?

Is there some other way of doing this?

Thanks,
Mark

2

There is an article scheduled on the Rails Designer site scheduled in a couple of weeks from now. It essentially the basics from the included code/repo of the embeddable widget of the book JavaScript for Rails Developers (it shows how to build a basic live chat widget using ActionCable with some vite/rollup niceties).

I’ve built a few in the past and also recently for clients.

iframe is typically the easiest to implement; no tricky cascading and everything is scoped. Web components or custom elements could be a solution too. Shadow dom could be used too.

You could use Stimulus by injecting a script element if it is undefined on window. But that seems a bit much for something fairly simple as the zendesk widget.

3

Thanks for that.

The ZenDesk was just an example of an embeddable widget. The actual thing will contain many “pages” so ideally I want to stay in the turbo paradigm.

4

OP stated

So what are you asking?

5

Hi @markjerz !

I have the exact same use-case. I want to have Turbo and Stimulus working as an embeddable widget inside of a Shadow DOM.
I have Stimulus working quite well, but unfortunately, Turbo wasn’t built with this use-case in mind.

Moreover, DHH closed my issue where I asked to remove global window.Turbo. And, throughout the codebase global window and global document are used all over the codebase.
It’s difficult to replace document with shadowRoot or similar. I don’t know how they do it in tests…

You can chime in here if you want:

Here’s more info:

Seems like yuki24 was doing the most to add support for Shadow DOM to Turbo:

What I’d love to see is being able to change:

  • Turbo root element (so that I can have a part of the page in a Shadow DOM, with Turbo Drive, etc.)
  • Turbo base domain (so that I can make Turbo Drive work on a different domain, hopefully it would also automatically change any relative links inside the Turbo root to point to Turbo base domain as base)

This will also allow me to have multiple Turbo widgets loaded on the same page. It would even allow Turbo widgets from different apps, since each Turbo widget will have everything encapsulated (instead of using global window.Turbo)

EDIT: Just found some more info: Set window.Turbo on import by excid3 · Pull Request #280 · hotwired/turbo · GitHub

EDIT 2: So far I’ve forked Turbo and I’m adding the needed functionality to my private fork. I don’t see the intention of Turbo maintainers to merge any of my changes so I’m not trying to make PRs. I started the discussion, but it was deemed as “not something common enough”.

6

For those interested, the referenced article was just published Creating a Simple Embeddable JavaScript Widget (for Your Rails App) | Rails Designer

Not using Turbo, nor Stimulus (which I think is not something you typically want with embeddable JS widgets).