Embed project at URL

Help with Snap! Snap! Community Site
1

Hi,
I'm trying to embed a Snap! project at a specific URL into a page, but can't figure out how to do so.
I know how to embed a project that's in the Snap! cloud, but not a project located at a URl.
How would I do this?

2

(in community site page)

image
image3840×1731 203 KB

3

That's a project in the Snap! cloud. I know how to do that; what I want to know is how to embed a project that's hosted at a different URL.

4

copy the resulting iframe

5

The URL for an embed does not specify the URL of the project file; it specifies a username and a project name. However, I need the embed to point to a file that is not within the Snap! cloud.

6

Jeez, how many times, and in how many fonts, does he have to say it? Try reading the question before you answer it. :~(

7

Maybe this will help (from the manual)?

Here’s an example that loads a project stored at the Snap! web site (not the Snap! cloud!): http://snap.berkeley.edu/run#open:http://snap.berkeley.edu/snapsource/Examples/vee.xml

8

Yeah,but I misinterpreted it as to paste the url into his own website

9

You can make a regular embed in HTML:

<iframe width="480" height="390"
frameBorder=0 allowfullscreen
allow="geolocation; microphone;camera"
src="">
</iframe>

Then replace the string in src with another string with the Snap! Editor URL:

<iframe width="480" height="390"
frameBorder=0 allowfullscreen
allow="geolocation; microphone;camera"
src="https://snap.berkeley.edu/snap/snap.html#present:Username=joecooldoo&ProjectName=Bouncing%20Circles">
</iframe>

Then append &noRun&embedMode to the URL:

<iframe width="480" height="390"
frameBorder=0 allowfullscreen
allow="geolocation; microphone;camera"
src="https://snap.berkeley.edu/snap/snap.html#present:Username=joecooldoo&ProjectName=Bouncing%20Circles&noRun&embedMode">
</iframe>

You should get something like this:

10

This seems to work after replacing snap/snap.html#present: with run/run:, though no controls (i.e. green flag, pause button, stop button) show up. I've got equivalents to them the project, though, so that isn't a significant problem. Thanks!

11

There are lots of options in the URL format. It's the last thing before the appendices in the manual.

12

I'm aware of this, though I don't see an option to show controls; only to hide them. Embed mode isn't mentioned either.

13

Yeah, for that you have to read the code generated by the embed button on the project page. :~)

14

The code generated by the embed button doesn't use embed mode; it uses https://snap.berkeley.edu/embed/, with the optional settings appearing in the URL as showTitle, showAuthor, editButton, and pauseButton.

15

Ah, okay, sorry...

16

By using API.js, you can make buttons to start/stop the project.
Here are the docs: Snap/docs/API.md at master · jmoenig/Snap · GitHub

17

Thanks, but it doesn't look like this is what I need; there's no (listed) function to start a project, only to stop one, and that function doesn't trigger WHEN I AM [STOPPED]. (There's also no pause function, but that isn't as important.)

18

In conjunction with the API.md document joecooldoo mentioned, you might be interested in checking out GUI.js. It uses the names of functions that are called when you press the buttons on a project, so I found it useful when making a Snap! 300x400 "app" viewer. Feel free to check out the code.

EDIT: The thing I made should be viewed on mobile. It looks weird if not on mobile

19

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.