Sometimes serendipity runs its course – like the almost happenstance privilege I get to blog in this space… or stumbling upon JavaScript that powers a whole new subset of WorkFlowy use cases: the ability to embed web content from a variety of sources right into your outlines. I don’t understand the first thing about JavaScript (only how to copy-paste), so you’re in good company. Now let me show you a couple of gems I’ve been polishing.
Below you’ll see a handful of apps and services I was able to get to show up in WorkFlowy – each of which have highly practical potential. I’m positive that more than one will pique your interest…
MindMeister Mind Maps
If you fancy yourself a spatial thinker and need some creative free-form elbow room, you might want to try embedding a MindMeister mind map at the top of your outline and eyeball it periodically:
- You get the magic of 100% of your MindMeister features right there in WorkFlowy, including a switch to full-screen.
- I’ve created a Stylish Style that hides MindMeister’s blue toolbars (like in the above GIF)… or alternatively, within the CSS you can also tinker with some toolbar customization options I’ve tucked away.
- You can embed the exact same mind map in multiple places in WorkFlowy.
- You can import/ export your outlines from WorkFlowy and vice versa through plain text, while preserving outline hierarchies.
YouTube Videos
Why not just pop in a plain YouTube URL? You could (and I do)… but maybe you’ll want to watch a YouTube tutorial and take notes at the same time just thereunder:
- Here’s one real-life use case of mine: watch the first 30s of the video in this post.
Google Docs
This is a mammoth one for those Google Drive people.
- WorkFlowy doesn’t do spreadsheets… but now you can embed fully functional Google Sheets spreadsheets into your outlines, as well as .rtf, .docx, .txt, and .pdf content from your Google Drive folders.
- Slot collaborative documents right into WorkFlowy project outlines.
- Use Google Docs to get email notifications on updated WorkFlowy outlines. I’ll be posting on collaboration in WorkFlowy next week!
- Use WorkFlowy to outline and then paste into a Google Doc.
- Use Google Doc’s blazingly fast Voice Typing tool. No voice-to-text extension out there is going to give you the speed and accuracy that Google does. The following GIF was recorded at real speed on an average Windows laptop. You’ll see that you can include all sorts of dictation commands, including paragraph breaks and punctuation. I could have spoken way faster and I would have gotten the exact same results:
Shared Evernote Notes
Shared Evernote notes are view-only. You knew that. Maybe you just want access to audiovisual material/ documents/ charts that you’ve stashed in Evernote… in WorkFlowy, right there in the thick of your project outlines. A couple of examples in the GIF below:
- Some data you might want to log in simple charts: Word count logs or daily schedules.
- You can hit the “View in Evernote” button to open up any note, ready to edit in your Evernote desktop client.
- You’ve also got instant online access to files stored in Evernote by clicking on them: in the below example, a PDF.
Gingko (Markdown Preview)
I write my blog posts 100% in WorkFlowy in what they call Markdown language. I then copy to a Markdown editor called Gingko so that I can convert it to HTML… and then paste that into WordPress. The process takes about 10-20 seconds tops. Below you can see that I’ve embedded a Gingko Tree into WorkFlowy. Actually you can’t see the tree. What you do see is one Gingko card within that tree that I’d previously zoomed into by hitting “F”. I pop my Markdown into that, copy the HTML… and I’m good to go:
Blog posts far and wide
Below you’ll see that I’ve embedded…
- A chapter of a web book entitled, “The Complete Guide to Understanding Consumer Psychology”.
- This blog post you’re currently reading.
Now you can scroll through a post and copy the useful bits of information to a WorkFlowy outline (or not) without having to switch tabs!
…
This is how we do it
Here’s a shared WorkFlowy list with instructions on how to enable iframe in WorkFlowy, including details on how to get and embed links for each of the examples given above. Click on “Add it to my account” (bottom right).
Tips
- To hide your embedded links, put them in the 2nd line of a note
- Play around with the zoom % in your browser to give you the ideal iframe dimensions.
We want more
Once you’ve set up iframe in WorkFlowy (with a little help from TamperMonkey), you will ALSO be able to do the following things!:
- (1) Swap out background images for different WorkFlowy themes.
- (2) Set any font for any outline.
- (3) Inline images. Yes! Inline images right there in WorkFlowy 🙂
A shout-out
Please give @wizmann some love in this tweet. Not only is he the guy behind the iframe code used in this post, but also the inline images code and the background images code in previous posts.
Get EXCLUSIVE bite-sized WorkFlowy updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.
I just came across this post today.
Intrigued and curious about it, I decided to give it a try.
I installed Tampermonkey, created a new user script and copy-pasted the script. It says I’ve installed WorkflowyPlus 0.1, although I’m not sure everything’s OK, as there are these signs appearing next to some of the lines of the code (image 1)
I’ve tried to follow the instructions to embed a Google spreadsheet: , both as a note to the headline and as a child bullet, but either way, it doesn’t seem to work (image 2)
Am I missing something?
Please create a way to 1) integrate with WordPress 2) create a way to integrate other ways of organizing information in a non linear format such as the mirror feature (jumps to other content, content tagging, priorities, categories, anchor text, jumps to other content) and 3) ways of formatting the information like the Kanban board (comparison tables, pros and cons, accordions, Gantt charts, calendars, mind maps, process flows, relationship diagrams, etc).
How do I STOP embedding the video and just ass the URL? I just found myself looking at this treasure:
Hi Jan, you can turn off YouTube embeds in your Settings menu.
This post talks about a hack that is independent of this relatively new feature.
This no longer seems to work. 🙁
I’ve spent ages trying to get it to work. I just don’t know enough
(or anything shall I say) about the code to troubleshoot it. Shame really as that would have been awesome. This post about mind mapping got me all gee-d up only to be deflated ☹️
I have been using this and been very happy with it, but when I embed workflowy using the iframe protocol, I get an error message: ERROR: “Error: Initialization data load failed.” My iframe line looks normal as near as I can tell. For Example, . I remove the last parens to keep the segment from loading unless I want it to. It is when I remove or add the parens that the error occurs. After I click on “OK” the iframe process then works just fine. Is there any way to get rid of the error message?
Embed Google Docs, Mind Maps, YouTube Videos, Evernote Notes and More in WorkFlowy
[…]The precise device you utilize to take your notes isn’t as important as the notes themselves.[…]
Frank, once again, you’ve amazed me. This is so excellent. Because of you, Workflowy has become my operating system. I’m saving up to get your book. Thank you for all you give to the Workflowy community. MAGIC!
Excellent feature guys. Works great with OneDrive files as well.
I was tinkering about a bit with this. Evenote worked great when i remembered the .html and to put it in a note and not the task itself. I also discovered that Padlets from padlet.com work as a charm! I also tried Dropbox public files, and that also seems to work – both picture file and sound file. Box public files too. Great! A couple of questions: 1) Do the files have to be public to be embedded in Workflowy? 2) I don’t manage to get Youtube to work, it only shows empty space beneath the iframe code. Any clues as to why?
Hey Camilla,
Thanks for the extra info. 🙂 That’s an interesting question – whether files have to be public. I’m not quite sure… I haven’t really paid attention to that. I do know that I had to sign in to a couple of the services I mentioned. So whether public files or not, I think having previously signed in is a requirement in a couple of instances. I think for services like Dropbox, the mere fact that you’re creating a share link means that it’s public. In the case of Evernote, that’s public too… since anyone with the link can access a shared (public) note.
As to YouTube… did you follow the instructions here? You need to grab the “embed” code, not the URL in your address bar. Let us know 🙂
Hi again Frank,
yes, I made it work. I had grabbed the share link, and not the embed link because of the iframe code around the embed link. When I copied the link without the ifram code it worked beautifully. Thanks for the hint!
Really want this to work. Copied and pasted script and re-opened Chrome. Tried both TM scripts including refractory. No love. Script appears “locked”–what does this mean?
I’d love to get past this bottleneck but so far, no love.
Thanks, that’s helpful. I see this commenter stripped out most of my example. Oh well
I’d like to make the big switch from Evernote basic to WorkFlowy, which would mean transferring A LOT of Evernote notebooks. But I’m not ready to pay for the premium service. So I was wondering, if I wrote a script to transfer everything in an Evernote account to WorkFlowy, would you guys let me and others use it as a one-time exception to the limit on items created per month? The script would only transfer text.
Hi Dustin,
Any wizardry you could come up with to transfer your data from Evernote to WorkFlowy would be an interesting one to look into… but I must say from the outset (as you most likely know) that one doesn’t transfer Evernote data into WorkFlowy, if, unless you are talking strictly about text. Even the embedding ability via iframe talked about in this post is comprised of text. WorkFlowy itself does not house attachments, documents, images, etc.
Just so that we’re on the same page, you’re limited to 250 lists a month (more if you invite others to join WorkFlowy)… and you can burn through 250 lists in a split second if you’re pasting, say, an article from the web into lists as opposed to notes (which can also only be comprised of text).
Comparing Evernote and WorkFlowy is like comparing bananas and lemons. Two completely different flavors. Depending on what you’re looking for, you may or may not be able to mirror your Evernote database in WorkFlowy.
Having said that, you are easily able to sign up for a month of Pro, transfer your text data from Evernote and then bump yourself back down to a free account. HOWEVER, you’re going to be really disappointed with your move if you think that 250 lists will see you through if you don’t understand the dynamic. A list is akin to one sentence or a paragraph (that is if you’re pasting in data with paragraph/ line breaks) . A list will not contain the text contents of an Evernote note unless you are pasting in text with zero line breaks… unless you paste it into a note. WorkFlowy’s search capability is best used with your data in lists as opposed to WorkFlowy notes. Lists allow you to whittle down the exact information you need. Keywords searched for in notes would return the entire note… and you’d have to scroll quite a bit… because WorkFlowy does not have a Note list displaying notes as Evernote does in a separate panel/ column.
In short, you need to be very clear about the differences between the two tools. One might not be a substitute for the other. You have to know what you’re in for.
I only have text in my evernote notes, aside from some occasional bullet lists and strikeout-text formatting, which I’m ok with losing. Signing up for a month of Pro would do the trick.
The info about WorkFlowy’s vs Evernote’s search is helpful. I was indeed planning to put the entire contents of each note into the WorkFlowy note area, which for me will be OK, but I see how that would be a limitation for some/most Evernote users.
What I imagine was producing a Workflowy list of depth 3, that looks like:
—
—-, with contents in the workflowy-note section
Is there an import feature besides the drag-and-drop one?
No import feature… unless you could export entire notebooks of your Evernote notes (i.e. selecting all the notes within a notebook or whatever context) to HTML… copy those and paste into WorkFlowy. Keep in mind that WorkFlowy only allows to paste 2,000 lists at a time (the equivalent of 2,000 line breaks in your HTML). You might want to research how to convert HTML to OPML, since OPML is WorkFlowy’s mother tongue – i.e. it’s a good fit. I’m not sure if this tool would help:
http://howardowens.com/converting-html-opml/
I’ve been looking for something like this! By the way, if you grab Asana image links and convert into workflowy; it loads stupid fast. At least it does for me. Thanks Frank
Yep, that’s a small side effect of embedding iframe in WorkFlowy – invariably you get faster loading time, since not everything on the original site is being loaded. Thanks for letting us know about Asana!
“MindMeister is OPML conversant, meaning you can import your outlines from WorkFlowy and vice versa.”
Not seeing how to export MindMeister mind maps as OPML or how to do any kind of export of mind maps to WorkFlowy. Any tips?
Hi Luke,
Aaah, I need to correct that in the post. Basically we’re just going to import and export plain text (while still preserving the outline hierarchies)…
Getting WorkFlowy outlines into Mindmeister: Through MindMeister’s import feature on your main dashboard, import a text file which was exported from WorkFlowy (plain text).
To export a Mindmeister mind map, on your main dashboard, click on the dropdown arrow to the far right of your specific mind map and click on “Export…”. You’ll then want to export it to .rtf (Rich Text Format) under “Document Outline”. You then copy and paste the text from the resulting download directly into WorkFlowy. It will preserve your various mind map hierarchies.
Also, if you want to export from Mindmeister’s native format (.mind/ JSON) and convert to OPML (which you can import to WorkFlowy), here’s a GitHub script (if you’re up to it): https://gist.github.com/mattbowen/1061929 … but I think you can get by with plain text import export.
I hope this helps 🙂
I did a branch of Wizmann’s Tampermonkey script with two basic differences:
1) No more markdown tags. The tags are now image: or iframe:, e.g., image:http://example.com/image.jpg.
2) There’s a Show (and Hide) button to toggle the image or iframe’s visibility
3) The images and iframes start as hidden by default, which is less disruptive of WF’s normal behavior.
I’m loving it, but developers do tend to get addicted to things they make (or even modify). Enjoy!
https://gist.github.com/drosenstark/66a40d35d32eaa28ec9727e38125fed5
Yes, this is excellent, thank you Dan!
I’m intrigued by this branch, but when I replace the original code, it doesn’t seem to work, even after refresh. I re-paste the old code, refresh and the original version works. Any suggestions?
Thank you Frank for this post and thank you Dan for a tweak! Now that I’ve come up for some air after submerging myself into embedding everything under the sun with a link into Workflowy… Dan, is there any way to tweak your code to have the embedded object shown by default instead of hidden?
Also, for those who like the icons better than words, you can replace the button caption Show/Hide with 👀/⛒ or whatever you like (replace those words in the nextTitleForButton and button variables). I’ll take the liberty and link the unicode post here (https://blog.workflowy.com/2016/02/23/the-mother-lode-unicode-list/) for a nice selection of unicode characters Frank put together.
Yep… I echo this… I’d like to have embeds and inline images show by default (with the tweak)… or even just show without the option to hide. IOW, take advantage mainly of the iframe: and image: tags.
While I love the idea, my one issue with Dan’s approach is the embedded item seems to pre-load even when hidden. This 1) slows workflowy down and 2) creates a large white (admittedly empty) space, even when hidden (at least for me). For this reason I am currently preferring to use the original iframe code with the final close brackets deleted as default and then just added back on when I want to switch the link ‘on’, and deleted again when I want to close it. This works pretty well for me and ensure no slow down until you really want to see the item.
This is so COOL! I love the show hide feature.
Having a great time with this – my one issue is it seems to also activate previews of any markdown images which don’t use the iframe but just have the  format … is there any way to have the iframe embedding without this side effect?
I was also able to embed a google drive pdf, as well as an entire google drive directory! Once you get the concept, there are lots of other goodies out there that can be embedded into an iframe. This is super cool.
Wow! Thanks for weighing in. Just blog posts/ web articles alone are a sizable portion of the web. That does away with the need to, say, clip web pages with OneNote or Evernote… Plus you get to see the continually updated comments sections. Throw in access to tools such as Highly highlighter for select web highlights, there’s a stronger case for not needing to duplicate web content anywhere. Now just to be able to search a select portion of the web without duplicating it!
Speaking of Evernote, I can’t get access to every line of dialog in “Lost,” “Star Wars,” etc. The notebooks all have locks on them. How do I open them? When I first, went over there, no problem, they were all available. Today, not at all.
Hi Ruth, they are all still public. Maybe you could try again? You can access them either online or within your EN account if you join them. anylineyouwant.blogspot.com
I wonder what it would take to turn this whole process into an extension.
I’m having trouble with the script once I paste it into TamperMonkey. It says that “$” is not defined. Can I get help for that? (I’m using Chrome on a Macbook Pro.)
Hi Stephanie,
I’d suspect that despite the error the script will still work. Try and use it as is. Any luck yet?
Hi Frank,
I did give it a try, both with an Evernote note and a google doc, and I don’t see the content of either link in the browser. Here’s what I’m using for the google docs link, in case the problem is with my syntax: 
Thanks,
Stefi
Hi Stephanie,
Embedding Evernote notes is a multi-step thing. The most “complicated” of the lot. You have to follow the instructions to the T to get the proper shared link (which involves actually seeing your shared note online and copying that URL, not the initial one you get from Evernote. The link seems to morph in the process.
For embedding Google Docs… your link looks good… it works, embedded in my WorkFlowy.
Did you make sure to put the link into a bullet’s note (Not the list title/ bullet itself)?
I finally got it to work! (At last. Kind of gave up on it for a while.) You were right about me putting the link in the task, rather than in the note where it belonged. Also, I commented out the “option strict” line in the TamperMonkey script to get rid of all of the exceptions. Usually just saying “oh don’t be strict” in a script isn’t a good idea. I’m a programmer; I know why it isn’t a good idea. In this case, though, it took care of the problem.
Thanks, Frank. I was able to replicate this on the Mac with Keyboard Maestro. It’s working perfectly.
Good to hear you’re a text expansion app guy. It sounds like Greek to those who’ve never looked into it… but as you know, it’s a breeze even for beginners.
Totally, I use Text Expander and Keyboard Maestro. They are a great way to automate repetitive tasks.
As you may know, the Mac also has a dictation feature built into the OS, so I just tap the Func key twice and start talking. It’s pretty fast, too.
Frank, this is pure genius! Love it.
Thanks Michael,
I was tinkering a little more with Embedded Google Docs this morning. I just can’t get enough! I was never a Google Docs person… but the Voice Typing thing has really grown on me.
Here’s a shared Evernote note with an animated GIF, which shows how I set up an all-purpose Google Doc in any WorkFlowy outline anywhere… to use Google Doc’s warp-speed dictation tool:
http://www.evernote.com/l/ATQvUiVzUf9JfKydkJfRN7hiGDIwgftxTAM/
Here are some tips to get it looking very simple and uncluttered in WorkFlowy:
Google Docs will remember your settings for each document you embed:
1. Play around with the right document settings under File > Page Setup. I set my “Paper Size” to A3 and my Margins to 0.2
2. Go into Google Doc’s “Full Screen”: View > Full Screen (This takes away all toolbars, giving you a blank canvas in WorkFlowy)
3. Hit Ctrl+Shift+S/ Command+Shift+S to activate Voice Typing.
4. Keep your embedded Google Doc in a bullet at the bottom of the list, and paste your dictated text into a WorkFlowy bullet above that.
5. Set up a Hotkey/ Autotext with a text expansion app that embeds the iframe link of a recyclable, all-purpose Google Doc for dictation into the 2nd line of a note. (I just type “xdoc” into a WorkFlowy bullet and I have a Google Doc ready for dictation in a second).
This is a mouthful… but the results are super fast!
I don’t know what kind of crazy IT magic is happening to make this work but – OH MY GOODNESS! This is awesome.
As I read your post, I immediately was thinking that this might be the solution to one of my TOP dilemmas with Workflowy: I often want to see items in more than one place.
Turns out the iframe links do in fact work for Workflowy pages too! So, I can create a list that is:
Monday
Tuesday
etc.
and use the iframe links to the search for @Monday, @Tuesday etc. This generates a page that has my “weekly plan” on one page, WITHOUT me needing to duplicate tasks OR move them out of their projects! YAY!!!!
Two wish list items to make this the perfect solution for me:
#1 – Is there a way to have those iframe Workflowy lists NOT show headers, footers, tool bars or the white space at the bottom of the page?
#2 – Is there anyway to implement RawBytes “FlatFlowy” within the iframes?
I know… give me an inch I ask for a mile…. I just see the POTENTIAL for this to be the perfect solution to making Workflowy absolutely SING for me (more than it already does!)
Hi Laura,
There are a couple of considerations:
1. Whatever WorkFlowy list you’re embedding will cause your whole WorkFlowy account to load… It will take a couple of seconds… but it’s not super fast. One way to get around this is to set up your list that you want to have in multiple places as a shared, editable list… grab that link and pop that into your iframe. That will load real quick!
2. Whatever list you load in your embedded iframe will look exactly like your browser tab’s WorkFlowy list does… i.e. it takes on the same Stylish styles, etc. What this means is that if you want to get rid of toolbars, headers, footers, etc… you need to set that up via Stylish… and all embedded WorkFlowy lists will look the same too 🙂 I keep the toolbar invisible by default. Using Stylish, there’s a bit of a catch 22 for trying to set up a style that acts only on your embedded list’s URL… because Stylish focuses on your tab’s URL and styles that… so embedded lists can’t get any special treatment, even if you set up styles just for those lists. If that makes sense.
“#2 – Is there anyway to implement RawBytes “FlatFlowy” within the iframes?”
Sorry I’m late to this party… I think it is doable… for sure it requires both custom iframe and flatflowy code. (btw your #1 could be rolled into the flatflowy code) I’m not sure how “universal” I could make it. I’ve been playing around with a tag based version of this script. You put #image or #iframe in the parent, and a regular link in the note (no markdown!). The iframe or image would only appear on zoom, and then hide all other times. Not sure if that approach works with your wishlist, but tags would make custom scripts (based on tags) easier.
You’ll see that I added another use case: “Blog posts far and wide”. That’s the easiest of the lot: You just grab the URL…
Great post Frank!
Love the YouTube one. The times I have had to either line up windows or switch tabs to take notes. This tip fixes that.
Ta!
Hi Chris,
Wait until you start using it! It’s surreal at first… but you’ll get used to it 🙂
1. I love the use of sniply… it felt like it was part of Workflowy. I had to do a double take!
2. You have once again amazed me with your workflowy-fu!
3. Does any of this make Workflowy slower for you?
Keep up the amazing work!
Hey Richard,
Nope… no slowness on my end. Remember that all WorkFlowy is doing is housing text… and the embedded iframes only show up when you have their bullets expanded or if you zoom into them. Those might take a second or 2 to load. No biggie. It might all seem quite over the top… but once you set it up, you’ll see how simple it is… and you choose the use cases that fit what you want to squeeze out of it 🙂