Open to full page embed code works on one form but not the other

I have 2 forms which I have embedded a catalog into.

 

When you click the catalog you are supposed to see a full version of the catalog.

 

It works on one form but not the other,.

 

Here are the 2 forms and here is the embed code for both.

 

Does not work - https://www.jotform.com/CDICORP/b2ecatalog

 

This one works - https://www.jotform.com/CDICORP/folds-of-honor-Catalog

 

 

 

 

 

Good Code:

 

<p><iframe src="https://cdns.snacktools.net/flipsnack/embed_https.html?hash=fdc8w39pb&amp;wmode=window&amp;bgcolor=EEEEEE&amp;t=14604987441460498744" width="640" height="385" frameborder="0" scrolling="no"></iframe></p>

 

 

Bad Code:

 

<p><iframe src="//cdn.flipsnack.com/widget/flipsnackwidget.html?hash=ft3axe443&amp;bgcolor=EEEEEE&amp;t=1476193066" width="640" height="385" frameborder="0" scrolling="no"></iframe></p>

It seems to me that you're having an issue using our text (html) field to embed your catalogs onto your jotform with one working and not the other.

If you look at your links you'll notice your bad link is broken because it's not the same as the other according to the good and bad codes you've provided above so I am under the impression that might be the cause of this issue but, please allow us some time to investigate it for you.

 

Sorry I might have pasted the wrong code before.

 

This is the one that is not working

 

<iframe src="//cdn.flipsnack.com/widget/flipsnackwidget.html?hash=ft3axe443&bgcolor=EEEEEE&t=1476193066" width="640" height="385" seamless="seamless" scrolling="no" frameBorder="0" allowTransparency="true" allowFullScreen="true"></iframe>

After testing this some it appears that the problem is with the code that you're trying to use for the one that's not working as it seems to be is incompatible because it's using a different widget url setup for its embedded iframe version compared to the other one that's working.

I've been tinkering around with some adjustments to the catalog code you gave us on a test copy of your form but, so far I'm not having much luck and it will be a bit difficult to investigate more accurately unless I can find a catalog embed tool to test this out with more accurately.

Where or what are you using to make these catalogs that you are trying to embed?

It wasn't from us I don't think was it?

To prove my point if you take your provided code that you're trying to plug into our text field and test it as a standalone by itself here http://htmledit.squarefree.com/ you'll notice the same problem with the code catalog being used outside our platform as well.

Thanks,

 

The catalog is generated through flipsnack.

 

I will follow up with their support and see if they can figure it out.  I'll keep you posted if I need any other info from you.

 

Thanks for your help

Thanks for letting me know about that.

I found they have a free plan so I was able to investigate this issue furthermore to try to assist with getting to the bottom of this so that you can get your embedded catalogs up and running with forms.

However, I'm not sure which templates you used? Or did you create yours from scratch?

Are they the same type between the two? I am thinking it's not because of the different starting url.

I believe I've managed to narrow the problem a little more as it seems to be related to the size of the frame for that particular setup.

If you change your height and width to a much larger value then when you click on it you'll then see the options to go full screen properly.

But, if smaller for some reason it's ignoring it for that particular embed link limiting it to such as you had it seems to break the one link that isn't working for some reason hiding it unless wider then it works. Otherwise, the result is staying small with the loss of the full screen functionality and that points back to the one url different than the other.

 

Your Good Code:

 <p><iframe src="https://cdns.snacktools.net/flipsnack/embed_https.html?hash=fdc8w39pb&amp;wmode=window&amp;bgcolor=EEEEEE&amp;t=14604987441460498744" width="640" height="385" frameborder="0" scrolling="no"></iframe></p>

 

Your Bad Code:

 <p><iframe src="//cdn.flipsnack.com/widget/flipsnackwidget.html?hash=ft3axe443&amp;bgcolor=EEEEEE&amp;t=1476193066" width="640" height="385" frameborder="0" scrolling="no"></iframe></p>

 

I'll do some more digging of this on our end in my spare time in case I can find a solution and do let us know if they have a better link that'd work with you for such.

Larger Demo (Working - but, cut off when full screened):

https://form.jotform.com/62843990673973 

 

Thanks.... I'm still waiting on feedback from flipsnack to see if they can
shed any light on this issue.

...

That didn't seem to do anything different.  Still won't go to full screen.

I do apologize about that as it was only going larger within the frame on my end.

I've also discussed this with one of my colleagues just to get a second opinion about the cause of the issue and unfortunately he confirmed the same that we believe it's due to the code being embedded.

Was there a template that you used for both of those flipbooks? Or did you make them from scratch?

That could possibly explain the differences in the code you were trying to embed since the one was working and the other wasn't.

I created these at different times so I'm not exactly sure if I took
different steps to create one over the other.
...

Thanks for getting back to us. From how I see it when I compare the 2 sets of codes you gave us, the src tag doesn't dictate the behavior of the catalog (whether it opens in full screen or not). It's more likely due to how the catalogs were created/setup.

You can give it a quick try by opening them both on their standalone versions:

1. Fullscreen

https://cdns.snacktools.net/flipsnack/embed_https.html?hash=fdc8w39pb&wmode=window&bgcolor=EEEEEE&t=14604987441460498744

2. Not fullscreen

http://cdn.flipsnack.com/widget/flipsnackwidget.html?hash=ft3axe443&bgcolor=EEEEEE&t=1476193066

If you would look closely, both URLs have a few parameters in common, but the hash= and t= values are what interests me. If I try to use the base URL from #1 and get the hash and t values of URL #2, here's what I would have:

https://cdns.snacktools.net/flipsnack/embed_https.html?hash=ft3axe443&wmode=window&bgcolor=EEEEEE&t=1476193066

With this URL, the src tags are now the same except the hash and t parameters. Clicking that new link will open that same 2nd catalog above, no changes, same behavior, and still won't open in fullscreen.

I'm afraid this is beyond our Scope of Support. The best assistance we can give you is to figure out what's causing the problem and a possible way to fix it.

If I'm in your shoes, I will be checking if the 2nd catalog has further options/settings inside my Flipsnack account that will make it behave the same way as the 1st one.