Adding your Tumult Hype animation to a Wix.com site

The quickest way to get your Tumult Hype document displayed in your Wix site is to host it on your server and copy its embed code. Here's a guide and video to uploading your Tumult Hype document to your site: Video tutorial: Uploading your Tumult Hype document to a Web Server and Embedding Within Another HTML Page

Alternatively, you could use a service like Neocities (guide here) or Surge to host your site.

  1. Follow the steps in the link above.
  2. When editing your site, click 'Add HTML snippet' and paste in the following code:

<iframe src="http://example.com/yourdocumentname.html" height="400" width="600" style="border:none;" frameborder="0" scrolling="no"></iframe>

  1. Replace the area within the 'src' field with your own document's URL, and make sure you update the height and width values as well to match your document.
  2. On the page you want to add your document, click 'Add ons' at the bottom of the menu after you click the '+' button, and click 'HTML'. Select 'HTML Code' in the 'Mode' dropdown, and paste your code in the box and click update:

2 Likes

Hi Daniel,

The upgrade 3.6 removed the option of export to Dropbox. Now is more difficult to my to export the animation to Wix. Before, I clicked “Copy Link” and paste in the option “Website Address” that bring me the HTML setting in Wix.

I have another option with Wix or Google drive?

Thank you,

Fuv

Sorry it’s more difficult! A few alternatives & guides have been posted here: Dropbox discontinuing HTML rendering / Public Folder

Here’s more info about Dropbox’s decision:

https://www.dropbox.com/help/16

What a pity. Was so easy to import Hype animations with Dropbox. Now it seems a kind of hustle…

is this option work now?

Nothing has changed on Dropbox’s side, so the best advice is to use your web host to host your files.

Wix only allows https now so is there a way to use hype on a wix website?

You would need to host your Hype content on an HTTPS-enabled server. HTTPS certificates are in most cases free. You can host on https://www.nearlyfreespeech.net/services/hosting And use Cloudflare to ensure the content is available over https. Another option is Github Pages.

1 Like

I've found a really easy way to do this -->

Use Surge (a brilliant application) --> https://surge.sh/
to create a free https domain and embed the URL in a Wix page.

Example:
https://mikeostest.wixsite.com/content/experimental

3 Likes

I need to embed a responsive slideshow with breakpoints in a Wix site. I see this uses an iframe, will it scale and adjust as it would if embedded in a standalone html page?

You would likely need to postMessage the embed/iframe or if six has some sort of break point you can set up for individual layout

Not really sure how to use that, is it a way for the wix page to constantly communicate with the original page so that if say the new site window is reduced in size or it's viewed on different devices it would pick the correct layout?
I normally set three breakpoints for mobile/tablet/desktop. Is it likely to be seamless and smooth or is there going to be a lag?

It's for a slideshow that I need more control over content and timing that Wix Galleries will allow.

Just found this which may point in the right direction.

Just been playing with Wix site builder.

One thing I am surprised not to see is some kind of auto responsive layouts like Squarespace.
But that may be in you favour in you specific use case


On a side note:

I really like Wix, It has some neat features including CMA management included in its roles.

And even better it acts like a single site, so I can put a radio stream in the Header and it continues playing without breaking when navigating to a new page.

1 Like

The autocorrect is hilarious. :smile:

1 Like

That to.

Thanks. pissing my self right now...

I can set breakpoints in Wix to match the breakpoints I set in Hype (or vice versa) within the pro version (X Editor) just not sure if the iframe will work seamlessly in terms of scaling? I don't want any scroll bars or lag in the main site. Also as O mentioned I cant see how to actually embed a hype animation in a wix page? If I just do it the way I would with a static site as in past in the HTML and use CSS padding to set the window it just gives me a narrow slot on the page but no animation shows?

I think you need to have created the site using Wix studio Editor And not Wix Editor.

If your six url is

https://editor.wix.com/html/editor/web/renderer/edit/232015cb-d2df-4ecd-95e4-17baed53aff9?metaSiteId=3ee07143-8ada-47f5-8832-276358a251786

You could try and change it to

https://editor.wix.com/studio/232015cb-d2df-4ecd-95e4-17baed53aff9?metaSiteId=3ee07143-8ada-47f5-8832-137a8a251786

The site will show up in the new editor Wix Studio.

It will not show the break points and editing it there may not work fully.

But from there you can go to the Wix Studio Dashboard and creat a new site that will open in Wix Studio and work correctly including the break points.

I have not used the break points yet bu plan to much the same as you when I add a hype embed.

I am new to Wix but this is how I stumbled across them.

Sorry I'm used to calling it X, know it's changed now. I'm using the studio editor but it doesn't allow uploading of non image files, so I can't create a resource folder. I have tried asking Wix support if they will allow an external reference so I can host it on my server but they won't discuss anything third party even though it's a request about existing features. Has anybody successfully embedded a Hype animation in a Wix site and if so how did you do it?

I'm thinking I change the link to something like this: (my server)

src="https://www.zincc.com/ws/anims/CC_intro_anim.hyperesources/ccintroanim_hype_generated_script.js?35571"

Would that work?

For my stuff I would actually just put the Hype Projects on my own external server and have the HTML embed look to it as a site. ( I.e point it to the html file


But.....

Bloody odd.

I just did a test.

I uploaded an image to wix. Copied its url.
Made a hype project with a rect with an image tag and src the image url.
Exported it in the Advance, using the CDN for the run time. and as a Flat file. ( export script)

In wix added a html embed , copied the html in the hype index.html which also holds all the js for the projects. and pasted it in.

I got Forbidden.
I re opened the HTML embed to edit, deleted a bit of the code ( click tag stuff) I did not need.
Still got Forbidden.
Hit the undo button ( which would put the click tag code back.
And suddenly the project loaded??.

https://dipole-speller-0m.wixstudio.io/hypetest


Added another flat file export plus a site one.