"Open with Studio" button for Markdown files.

[smoya]

Reason/Context

I'm lately advocating for using Studio whenever I want to add a link to an AsyncAPI file in a Markdown file such as Readmes. Thanks to the ?url=<url-of-file> query param, Studio can load most of files (yes, not all of them, see #127).

I think it would be awesome to create a new design for a button that says "Open with Studio", with the AsyncAPI logo on the left or similar.

Description

To design a button that says something like "Open with Studio", with the AsyncAPI logo somewhere that people can use for linking to AsyncAPI files in their Markdown/HML files.

Some examples:

• 
• 
• 

cc @mcturco @alequetzalli @boyney123

[fmvilas]

I'd actually go beyond Markdown files and would provide an HTML widget (iframe).

[quetzalliwrites]

I haven't really worried (yet 😈 ) about stuff outside of AsyncAPI's docs and community building, so I haven't been majorly affected by the absence of this.

That said, I can say that I imagine that if I started developing more with our spec, that I would appreciate having the option to open an AsyncAPI file in Studio if it empowers me in visualizing events better.

I think that is a long way to say yes? 😄

[mcturco]

@smoya I think this is a great idea! I can definitely work on an image for the button that we can use in markdown files.

I'd actually go beyond Markdown files and would provide an HTML widget (iframe).

@fmvilas do you mean we would make an iframe to run the Studio on someone's website?

[magicmatatjahu]

do you mean we would make an iframe to run the Studio on someone's website?

I think people can do that on their own, unless we have configured restrictions on the domain side, but I don't think so :) However, we can prepare a docs and a postmessages system so that users can react to changes in the Studio. What do you think?

[mcturco]

However, we can prepare a dock and a postmessages system so that users can react to changes in the Studio

@magicmatatjahu I think this would be a great feature to add! And maybe if it gets too complicated in the iframe we can send them to the studio website to explore more features

[fmvilas]

@fmvilas do you mean we would make an iframe to run the Studio on someone's website?

No, I meant the button itself is an iframe so when it renders on someone's website we can track it's been used, where, etc.

[mcturco]

No, I meant the button itself is an iframe so when it renders on someone's website we can track it's been used, where, etc.

@fmvilas oh!! yes that's also a great idea and we should do that 👍

[boyney123]

Just come to say love the idea @smoya think it can be useful for sure!

[boyney123]

@mcturco any ideas for a design for the button we could use?

[boyney123]

If we went the iframe solution anybody got any ideas on how this could work?

I'm guessing

• Iframe with a button inside and image
• Button goes to function/URL somewhere that can track things (maybe in Google Analytics)?
• URL then directs to the studio...

Kind of a middleman/gateway pattern.....

---

OR

Also, we could use IMG-shields here is an example 👇

With logo (we can add ours here https://simpleicons.org/ to use it on the shield)

Without Logo

Using some query param ref or something, we could track who is coming from github etc? What kind of metrics are we after here @fmvilas?

[fmvilas]

If we went the iframe solution anybody got any ideas on how this could work?

Sorry, on Markdown you can't actually embed iframe as far as I know. I meant to have an iframe version for HTML but the one for Markdown would have to be an image 👍

[fmvilas]

I think the metrics I would be more interested in are:

• Which websites are using the button (feasible by inspecting the HTTP headers when the website is requesting the image)
• How many people are clicking on the buttons (hard to track in Markdown)

Anything else I'm missing? Maybe we should just give up tracking on Markdown? I don't know.

[smoya]

• How many people are clicking on the buttons (hard to track in Markdown)

What if we provide a "button generator" that can either generate HTML or rather Markdown code? We could control the final URL so the tracking might be possible. Of course people could still go in their own creating manually the button, but at least we cover it partially.

EDIT: we could use something (or exactly) like UTM query params for this. https://blog.hubspot.com/marketing/what-are-utm-tracking-codes-ht

[mcturco]

@mcturco any ideas for a design for the button we could use?

@boyney123 yes! I think it could be something very simple. I know we have everything drafted for the new branding right now and it is not actually launched yet, but do you think we should use old brand or new brand?

cc: @fmvilas