Siberian CMS Customization

How to get in-app links?

This functionality allows you to create links to a page in your app from another page.

Just add a Source code feature to your app and click on source button.

Now click on arrow button.

Now select your feature for which you want to get in-app link.

Now click on source button.

Here is your html in-app link code.

For this example in-app link is:

<a data-offline="true" data-params="value_id:644" data-state="cms-view">Custom Page</a>

Google Drive - File Direct Download URL Trick

When you publicly share a file on google drive it's URL will be look like below:

https://drive.google.com/file/d/14NV9kfJ819t-uP5NHfsQpi4tgTP3dzOi/view?usp=sharing

When you open above URL, It will open default google drive preview screen with download button.

If you want to skip this preview screen and want to create direct file download URL then you can use below URL:

https://drive.google.com/uc?export=download&id=DRIVE_FILE_ID

Here you have to replace DRIVE_FILE_ID with your actual file id.

For example in above demo link, DRIVE_FILE_ID: 14NV9kfJ819t-uP5NHfsQpi4tgTP3dzOi

So your direct file download link will look like below:

https://drive.google.com/uc?export=download&id=14NV9kfJ819t-uP5NHfsQpi4tgTP3dzOi

You can use this URL in Links Library module for direct file downloading.

Latest CSS Templates - 2021 for Siberian Apps

We are going to launch many CSS Templates as per latest and modern app design trends of 2021.

(1) Modern Gradient / Box Shadow concept

(2) Neumorphism concept

(3) Glassmorphism concept

We know that almost of you or your users aren't familiar with CSS, so we will provide you CSS codes which you or your users can edit very easily.

We will try to include the whole feature / module in one template. Many modules are of multi-pages modules like My Account feature has different pages Login Page, Registration Page, Forgot Password Page etc.

We will use CSS Variables throughout the whole template. (Suppose you want to change button background color for all pages of My Account feature, then you just need to change the color code at single place only.) We will provide all the CSS Variables at the starting of the code, so that you can change the color code or customize it very easily.

We will also provide you a JSON URL for each template, so that you can directly import it to our CSS Codes Collection Module.

Pricing Model:

(1) Per Template Based

(2) One time payment, Lifetime All Templates Access Membership

Note: Those who are interested in taking a membership, Kindly contact us at contact@webvista.co.in

Here we will cover popular layouts and below listed most useful app features / modules:

(1) Booking

(2) Calendar

(3) Catalog

(4) Contact

(5) Classified

(6) Commerce Pro

(7) Marketplace

(8) E-menu

(9) X-Delivery

(10) Places

(11) Folder v2

(12) My Account

(13) Links

(14) Discount

(15) Loyalty Card

(16) Padlock

(17) RSS Feed

Really Responsive Comparison Table

Comparison table are used to compare items like products, services, features, pricing etc. We have made it really responsive with a tab like view so the end user can use it very easily.

This is not a module, it's a html template that can be used with Siberian Source Code Feature.

Responsive Mobile App View:

Desktop View:

How to get IMGUR client id?

This tutorial is for Siberian CMS Editor Image Uploader Module. You will find more details here: https://extensions.siberiancms.com/downloads/image-uploader-editor/

Now register your application by directly visiting this link: https://api.imgur.com/oauth2/addclient

Give your app name like "Demo App / Image Uploader"

Authorization type: OAuth2 Without a callback url

Your email and description like "image uploader"

Checkmark "I'm not a robot" captcha and click on the submit button.

Now you will get Client ID. Copy-paste it in Backoffice >> Manage >> Modules >> Image Uploader

How to open Support Link in a new tab?

As you know in Siberian CMS Editor, you can display the Support Link. But it's opening in the same window, so here is the trick to make it open in a new window.

Suppose your support link is https://example.com so you have to put this link like below format in your Siberian CMS Backoffice >> Settings >> Communication >> Support Link

https://example.com"target="_blank

Now your Support Link will be opened in a new tab/window.

Web Share API for Siberian WebApp

Siberian Native Apps has Social Sharing functionality by default but it's not available for Web Apps.

So here i am sharing a simple Web Share API example. By using this code you can able to use Share functionality in Web Apps.

Note that this won't work in Native Android or iOS Apps. It's just for Web Apps. So if you want then you can hide this page from Native Android & iOS Apps using CSS.

This feature supports in Android Chrome Browser & iPhone Safari Browser (iOS 12.2+).

You can use below code in Source Code Module.

<button onclick="share()" target-"_system">Share this WebApp</button>
<script>
function share() {
if (navigator.share) {
navigator.share({
title: 'WebVista',
text: 'I like this, Just check it out...', // Change Share Text Here
url: 'https://webvista.co.in/siberian-pwa.html' // Change URL Here
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
} else {
alert("Web Share API is not supported in your browser.");
}
}
</script>