Custom App/Code Development

smallbizpreneur · ‎06-08-2018

We are having a programmer take an excel spreadsheet and turn it into a room cost calculator for our website. If the programmer develops the app in html,css and jquery will I be able to use the embed code to post it on my site? If not how do I add an app that is not an app purchased from the weebly store?

robinwhitmore · ‎06-22-2018

We only accept apps that are for sale in the App Center. At this point, we don't have the ability for sites to have "private" apps.

Our sites do have an Embed Code element that you may be able to use if everything can be done from the web page. More info here: https://hc.weebly.com/hc/en-us/articles/201740213-Create-Widgets-Embed-Code-and-Add-External-Content

smallbizpreneur · ‎07-05-2018

Thanks Robin, the calculator works in excel and google sheets but when I post it to the website by using the weebly embed widget and copying the google sheets embed code into the widget, all I get is a picture of the calculator rather than a functioning calculator. What am I doing wrong?

robinwhitmore · ‎07-05-2018

The Embed widget simply adds html, so it should work if that embed code from Google is meant to work on an HTML page. Does the embed code start with an iframe?

devsupport · ‎07-05-2018

Hello @smallbizpreneur

You said "...all I get is a picture of the calculator rather than a functioning calculator", was that BEFORE -or- AFTER publishing the site please?

I am asking because I just tested the Embed Code element on my development test site using a GDrive Sheet, you can view it here on the home page: https://www.apihacker.com/ (it is the spreadsheet that looks like the file I've attached to this message).

To accomplish this, here's what I had to do:

1. From the Google Sheet File Menu (not the browser's File Menu), choose: File -> Publish to Web

2. Choose "Embed" (this will give you the `iframe` version that the Embed Code element requires)

3. Define any additional parameters you desire

4. Publish, and copy the code displayed

Now on to the Weebly Tasks:

1. Login to Weebly and open the editor for your site

2. Select the page for editing

3. Drag an instance of the Embed Code element onto your page

4. Click on the newly placed element to open the settings dialog view
5. Paste the `iframe` code you copied from GDrive into the indicated field

6. Exit out of the settings dialog view

7. Publish your site

If you do not add a custom, inline CSS rule for the `iframe` code, it displays rather compact and cramped.

So I went back into the editor, clicked the element instance on the page, and added the following inline CSS rule (your CSS needs will require you to adjust the rules respectively):

style="width: 100%; height: 400px;"

Then I exited the settings dialog view, and re-published the site. That got me to the point you see now when you view the link I shared earlier.

You initially stated your developer is creating HTML, CSS, and JavaScript for your calculator. I'm guessing that means it is NOT part of a GDrive Sheet or Document which can be embedded so easily.

In order to have a custom web app operate properly within the Embed Code element as I've described, your developer will need to have the HTML code on a publicly addressable web server (which is CORS compatible for your site on Weebly).

Then, he should be able to define the `src` attribute for the `iframe` code approprately, and including the custom CSS so it displays properly.

Does this help answer your quesion and get you back in business?