Database Design Documentation
How can we help?
Full Site Search

Embedding on Your Website

What are Website Plug-ins?

Ragic applications come with a variety of useful Website Plug-ins that could be embedded on your website or sent as a separate link to others. These website plug-ins become available automatically as you create the sheets in your applications.

This means that you could embed forms to your website that will be stored in your database once they are submitted, provide access to your customers and clients to search your database, or even view your entire database.

Embedding your Database with the Web Embed Tool

To view the website plug-ins that are available, click on the Tools menu on either the listing page or form page, and select Embed This Sheet under Share in the menu.

Here you can choose from six types of plug-ins that are offered.

After following the steps in the wizard, Ragic will give you an HTML code snippet that you can copy & paste to the place where you want to embed the plug-in on your website. You will also see a form link for you to simply send out to directly use the plug-in as a standalone page.

Ragic also supports embedding on WordPress with a WordPress plug-in.

Types of Website Plug-ins

Deciding on how your viewers will be viewing your database is the key when choosing which type of website plug-in to use. Here is a condensed guide to choosing the correct plug-in depending on your purposes (click on the plug-in name for more information).

Name Purpose
(1) Database Viewer A simple listing of all your entries in your sheet that your website user has access to, with three different layouts to choose from.
(2) Database Query Displays query fields that allows users to create queries to search for entries in your database.
(3) Database Form Displays a blank database entry form that will allow users to submit forms, that will be saved as a record in your database.
(4) Database Search Displays a search engine box that will enable keyword searches for entries in your database sheet.
(5) Database View & Query Displays query fields that allows users to create queries to search for entries in your database. The search results will be displayed below.
(6) Raw Embed Embeds your database in an iframe with the Ragic UI you see on your account.

Once you choose the type of website plug-in, you may also tune the layout for each embed type with custom CSS.

(1) Database Viewer

The database viewer is a simple listing of all the entries that your website user has access to. You can grant access to your entries with Ragic's access rights, which also gives you the option to make the entire database public if needed.

You can configure different types of layouts listed below on the first step after picking "Database Viewer" as your web embed type.

Just like the listing page - form page transition, your viewers would be able to click on the entries to view the more detailed form page.

Database Viewer Layout Types

The table layout shows your records with a bare-bones list, which is displayed according to how you display your listing page.

The block layout has a little more flexibility, it will display your records in rows according to the fields you would like to pick in this configuration. Simply hover on the fields that are displayed in the preview to change the field that is mapped to.

The album layout is suitable if you have images in your database. This layout shows an image as a thumbnail, and your records will be arranged in a grid. Like the block layout, you can hover on the fields that are displayed to change the fields they are mapped to.

(2) Database Query

The database query form allows your users to query your Ragic database with the criteria available for each field you decide to add.

You can pick which query fields will be shown as default and the order you would like the fields to appear on the configuration page. To do so, click "Set Default Query Field"

The query fields will be displayed in accordance with the field types in your sheet. For example, if your field is a selection field, the query form can show multiple selection options in a dropdown menu so that the query can be made in multiple categories.

After the query is submitted, users of your form will be able to view records that fit into their query criteria with the database viewer layout type you pick in the next step.

Just like the listing page - form page transition, your viewers would be able to click on the entries to view the more detailed form page.

Database Query Exact Mode

The Exact Mode setting is available for Database Query and Database View & Query. With this setting, users would be able to search the data by entering the query that is exact matched even if your sheet is not in public. For detailed information, you can refer to this article.

(3) Database Form

The database form gives you the option to embed a form that your users can fill. The forms will automatically be saved as entries in your database when submitted by your users.

After picking "Database Form" as your web embed type, you can preview and configure the layout of your form. You may refer to this document for more information about the difference between the old version and new version.

Banner Settings

You can click on the "Banner settings" section to choose a banner image or upload one. the suggested image size is 1500 x 300 pixels.

Background Color Settings

Right here, you may select the background color of your embedded database form.

Field Order Settings

For better user experience on different devices, The new version of the Database Form has a single-column layout, which is the same as the layout of Ragic's mobile app. By default, fields are displayed from left to right, top to bottom. You can select the "Field Order Settings" section, click on the field name/description you want to move, and use the arrow button to arrange the order.

Pre Fill Value Settings

If you would like to let users fill out a web form with some default values, you can apply this feature. For instance, if you hope that the users from different departments can auto-fill their corresponding product category and department when signing up for internal training, you may configure Pre Fill Value Template. Besides, you can set multiple templates for each department. After finishing the settings, click the template you want to choose (grey out) and save.

Provide the link which applies the "For Marketing" template to the users in the marketing department. When they open this form, the field "Product Category" and "Department" will be already filled with the values you set in the template.

Selection Field Display Settings

You can slightly tune the way your form is displayed for some field types, such as selection fields. Clicking on the "change type" text on the bottom of fields in the configuration will switch a selection field from a dropdown menu to radio buttons.

Please note that the selection field cannot be set to display as "radio buttons" in situations written below:

1.The selection field contains more than 5 options in it.

2.The selection field is in a subtable.

3.Cascaded selection field

4.Select from other sheet field

If the form contains Selection or Multiple Select fields, you can randomize selection order.

You may also tune the layout of your embedded forms with custom CSS by clicking on "Add Custom CSS" in the bottom left corner.

After configuring the layout, you may click "Next" to set up the response message after form submission.

You can choose to display this message as "Plain Text" or "HTML" by selecting the tab above the text entry box. If you put some HTML codes in the text entry box, you'll need to select the "HTML" tab.

If you add spam prevention

Users will see a checkbox for verifying whether the user is a human or not at the bottom of the embedded form.

If you enable Display "Submit another entry" link

Users will see this after submitting an entry, which they can click on the link to submit another entry.

If you wish to fill in pre-defined values in selected fields, you may achieve this by adding the pfv parameters in the embed URL:

https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new&pfvfieldID=value

For more rules, use the "&" to combine each rule:

https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new&pfvfieldID1=value1&pfvfieldID2=value2...

The URL consists of 3 components:

1. URL generated by the embed tool: For example, https://www.ragic.com/ramzawang01/forms2/4?webview&webaction=form&ver=new

2. fieldID: The field ID of the selected field. For example, 1002358.

3. Value: the value you would like to fill in.

With the above setting, when users click on the URL to create an entry, the system will fill in the pre-defined values in the selected fields.

(4) Database Search

This search engine box will allow your users to search your Ragic database with keywords.

The search results will be displayed similarly to the database viewer with the criteria that were entered. After the search is submitted, users of your form will be able to view records that fit into their query criteria with the database viewer layout type you pick in the next step.

Just like the listing page - form page transition, your viewers would be able to click on the entries to view the more detailed form page.

(5) Database View & Query

The Database View & Query will allow you to view the query results on the same page where you enter the query instead of heading to a new page for the query result as Database Query does. It's like Database Query that's combined with Database Viewer.

Database Query Exact Mode

The Exact Mode setting is available for Database Query and Database View and Query. With this setting, users would be able to search for data by entering the query that is exact matched even if your sheet is not set to public. For detailed information, you can refer to this article.

Display logout button

By selecting to display logout button, there will be a logout button on the top right corner of the page.

(6) Raw Embed

Embed the same spreadsheet UI you see on Ragic with an iframe on your website. This is not a bare-bones HTML form or list, so it will be different from the other embedding options above. Users will need to log in to your account if you don't have public sheets set up.

On your settings for the raw embed, you will have the option to select whether or not to create a new entry by default, showing the search sidebar, and showing the top form buttons to users.

After setting up, you can copy and paste the embed code and use it to embed Ragic on your website.

Users will be able to do full text searches from the search icon on the upper right corner, similar to how full text searches are done within your Ragic database sheets.

4. Access Rights

One great advantage of using the Web plug-in is that you do not need to purchase user licenses for users of the Web plug-in if your sheets are set as public.

On the other hand, if you didn't set your sheets as public while using Web plug-ins, visitors will see a log-in page if they are not logged in (except for Database Query.)

However, Database Query Exact Mode and Database View & Query Exact Mode are the exceptional cases that you don't have to set your sheets as public and users are still able to search the data by entering exact matched query.

5. Parameters for the web embeds

If you would like to have some of the fields pre-filled with values determined by your embed code, you can add a parameter to your Raw embed iframe URL starting with the prefix "pfv" to specify the value you would like to fill in.

For example, if you would like to fill the value "Ragic" to field id: 1000001, you can add pfv1000001=Ragic to the iframe URL query string.

Furthermore, if you have enabled autosave on your sheet, you can also automatically create a new record by adding the parameter “autoSaveData” to the URL.

You can also do queries to your embeds by referring to this knowledge base article.

Top of Page Table of Contents

Start Ragic for Free

Sign up with Google