Creator Help

Embed Forms, Reports and Pages

Overview

Zoho Creator lets you embed Forms and Reports in your website, wiki or blogs just by pasting the embed url of the form or report. By default, the embed URL will be a private URL and provides access to the embedded form, only by login. You can use the publish option to get the public url of the form. The public url provides access to the embedded form, without login.  (i.e) any user who has access to the location where the form/report is embedded, will have access to the embedded form. You can customize the look and feel of the embedded form/report to match your website.

Note:

  • While accessing a published page, all the forms/reports embedded into it should also be published to avoid errors/conflicts.

Embed Forms with login access

To embed a form,

  1. Select the form to be embedded and click on the Setting icon beside the Form name and select Embed in your website option, in application live mode. (To go to live mode, click on Access this application button)

  2. The Embed dialog will be displayed with the <iframe> code, as shown in the screen-shot below. If your form is private, users will have to login to access your embedded form. To access the form without login, select the Publish link. You will now find an encrypted code appended to the existing url.

  3. Copy and paste the code snippet displayed to your website.

Sample URL Format

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zoho.com/< app owner name > /< app name >/form-embed/< form name >/'></iframe>

Sample URL

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zoho.com/sampleapps/sales-database/form-embed/Sales/'></iframe>

Embed forms without login access

To enable shared users to access your private embedded form without login,

  1. Select the Publish link displayed in the embed dialog, as shown in the above screen-shot. (Refer the Embed screen shot in the section "Embed Forms with login access"). You will now find an encrypted code appended to the existing url. Copy and paste the code snippet to your website.
  2. To prompt for login details, click on the Remove Publish link, as shown in the screen-shot below.

(OR)

Publish the form from the edit mode of your application. Refer the section Publish Form, Reports and Pages for more information.

Sample URL Format

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/< app owner name > /< app name >/form-embed/< form name >/ < encrypted code>'></iframe>

Sample URL

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/sampleapps/sales-database/form-embed/Sales/gjbKGZF'></iframe>

Customize look and feel of embedded forms

To customize the look and feel of the embedded form refer the Form Customization section.

Embed Reports with login access

To embed a report,

  1. Select the report to be embedded and click on the Setting icon beside the Report name and select Embed in your website option, in application live mode. (To go to live mode, click on Access this application button)

  2. The Embed dialog will be displayed with the <iframe> code, as shown in the screen-shot below. If your form is private, users will have to login to access your embedded form. To access the report without login, select the Publish link. You will now find an encrypted code appended to the existing url.

  3. Copy and paste the code snippet displayed to your website.

Sample URL Format

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zoho.com/< app owner name >/< app name >/view-embed/<page name >/</iframe>

Sample URL

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zoho.com/sampleapps/assignment-tracker/view-embed/Dashboard/'></iframe>

Embed reports without login access

  1. To enable shared users to access your private embedded report without login, select the Publish link displayed in the embed dialog, as shown in the above screen-shot. (refer the Embed screen in the section "Embed reports with login access"). You will now find an encrypted code appended to the existing url. Copy and paste the code snippet to your website.
  2. To prompt for login details, click on the Remove Publish link, as shown in the screen-shot below.

(OR)

Publish the report from the edit mode of your application. Refer the section Publish Form, Reports and Pages for more information.

Sample URL Format

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/< app owner name >/< app name >/view-embed/<page name >/< encrypted code ></iframe>

Sample URL

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/sampleapps/assignment-tracker/view-embed/Dashboard/Thjkff'></iframe>

Customize look and feel of reports

To customize the look and feel of the report refer the Report Customization section.

Embed Pages

To embed a Page,

  1. From your application dashboard page click on Publish link of the page to be embedded (or) select the page and click on Settings - Publish option.
  2. The Publish page will be displayed with a preview of the page to be published.
  3. Click on Publish button to generate the embed url for the page. Copy and paste the displayed embed url in your website or blog.

                                                   
                                                   Screen shot of the publish page for a Page with generated Embed URL

Sample URL Format

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/< app owner name >/< app name >/view-embed/<page name >/< encrypted code ></iframe>

Sample URL

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/sampleapps/assignment-tracker/view-embed/Dashboard/Thjkff'></iframe>

Note:

    • Internet Explorer users make sure you do NOT have the following setting in your website, to ensure proper loading of embedded forms and reports.
<meta http-equiv="X-UA-Compatible" content="IE=8">

Top