HTML Webpage for Coda Embed

Showcase Tips and Hacks
1

Warning! I am not a web developer and have very little knowledge on the matter.

Got no help from codans and I figured it out myself so I decided to share with simillar fellow users who would like to embed a coda doc into HTML on a webserver.

I am sure the community has lots of web devs so they could contribute to this hack.

NOTES:

  1. Replace XXXXXXXX below with your own embed link. Not the whole of it but just the link to the document. You’ll figure it out :slight_smile:
  2. Since Coda is not supported on IE and Edge, I added a very simple script for browser check and redirecting to a webpage. (obsolete already, so remove it if you wish)
<html>
<head>
    <style type="text/css">
        .frame {
        position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	opacity: 1;
    	display: block;
    	width: 99.5%;
    	height: 100%;
       </style>

//OPTIONAL SCRIPT FOR REDIRECTING IF BROWSER IS NOT SUPPORTED
    <script type="text/javascript">
    if (/MSIE 10/i.test(navigator.userAgent)) {
       // This is internet explorer 10
        window.location = "https://theimind.com/";
    }

    if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
        // This is internet explorer 9 or 11
        window.location = "https://theimind.com/";
    }

    else
    {
    // Not EI or Edge, do nothing
    }
    </script>

//END OF SCRIPT

    </head>
    <body><p><iframe allow="fullscreen" class="frame" src="https://coda.io/embed/XXXXXXXX?viewMode=embedplay&amp;hideSections=true" style="margin-top:-100px;"></iframe></p></body></html>
5 Likes
2

Great concept - can you post an example to see what it would be like before setting it all up?

3

How to and where use this code ?

4

You would need to create a simple index.html file with this code inside copy-paste and then follow the notes above. The resulting HTML would have to go on your webserver hosting. Please let me know if not yet clear.

2 Likes
5

Got it ! Thanks. Thanks.

1 Like
6

Sent you a personal message with a sample. Hope it helps.

1 Like
7

Hi @Stefan_Stoyanov ! could you please share the sample? I’m trying to set this up

8

This sounds great, Stefan - would love to see an example!

9

Hi Stefan, Would you be a tad more specific about how to set this up? I am trying to find the HTML code for a coda doc to place on an external website. Thank you so much, in advance!

10

Guys, apologies for taking ages to respond. You’ve probably found alternatives already which would be good because my solution is not brilliantly safe.

Here is a sample of a page published with iframe in Webflow: https://showcase.theimind.com/

11

Hi @Stefan_Stoyanov ! Thanks for sharing this!

I’ve tried to use this with a published doc but “coda.io refuse the connection”, i think it make more sense to share published versions of docs, to better control what users does, but as now it seems deactivated, do you/someone have any ideas about how to solve this?

@coda-team will custom domain will ever be supported/accepted? And, why in publishing mode there is the right sidebar, the empty one? 'cause there is not left/right sidebar in published doc’s (if nav bar is on top) so that is just wasted space, that in small screen is a little sad…

Thanks! :slight_smile:

12

Hi Mario,

You can use a published doc URL. It should be an embed URL. But if you haven’t invested a lot of time in Coda, I would not encourage you to do so for external documents. Coda is pretty bad in access rights and security and neither Publish, nor Share, nor Embed would serve you for anything that’s going to be accessed by external people.

Good luck,
Stefan

1 Like