Managing Content

Components


Components

Components are used to customize the design and functionality of your pages

Miscellaneous

1. OpenAI Chat

Please note that for the CHATGPT function to work correctly, you need to have a valid OpenAI account and an API key.

You can configure:

  • Avatar icon for bot and user
  • Styles in messages, background and text color
  • Choose a model, ChatGPT3.5 turbo or ChatGPT4
  • Configure the instructions for the bot, for example: tell me his name, where and by whom he works, how he can help, etc.

 

2. HTML Code

Custom HTML block with Javascript support

You can add any widgets and scripts to your application.

In this example, we will add a simple code: A running line with a smiley face

You can use this component for various tasks, connect to other services that offer the use of widgets, such as support chats, booking services, etc. You can even write code to design your page.

 

3. Image

the image component has universal settings, you can add 1 or more images and make a full-fledged slider

Images can be added locally

Or output them from your database using macros

You can set up a separate background for your image

 

4. Text

The Text component can be used as a statistical or dynamic display of content

With statistical display, you write your content in the editor and save it. In the second case, if you need to use content displays from the database, then you can apply macros

 

5. Webview

WebView is a component of the Moxly platform that allows embedding web pages into mobile applications.

In order for your website to work in the mobile version, the site must have an SSL certificate and open to display in a frame

You can use macros from the database for use in the Webview component.

No need to add many components and new screens

You can use the list component, connect to your database and configure your actions to redirect the screen from the Webview.

On the page with the Webview component in the URL field, use a macro (api of your field in the database)

 

6. Portal component

This component outputs content from user settings in a low-code editor

 

Databases

Database components are designed to work with dynamic content

1. Registration and authorization of users

There are 4 components that you will need to set up user authorization:

  1. Default login form
  2. Default user profile form
  3. Default register form
  4. Default reset password form

So, for each component we will need to create 4 screens and set actions. 

Let's see how it works with the registration component example:

  1. Adding a new screen
  2. Drag the Default register form component and the button component onto it

Go to the settings of the registration component:

  1. Customize the style of text and lines
  2. Specify actions to be taken after successful or unsuccessful registration

You need to fill in a message that the user will see after the action is completed, as well as where he will be redirected in case of successful registration, for example, to your home page or to a closed section of the application

Now, to make it all work, we need to add a button below our form and set an action:

Select from the drop-down list: register user action.

That's it, you did it!

Now do the same with other components for user authorization. You can also add pictures or texts to your screen to make your design more unique and attractive.

You can add new fields to the form in the User management section

2. User Management

User management of your application allows you to:

  1. View, edit, delete or deactivate users
  2. Add new fields and settings for forms

 

 

3. User forms

User forms are designed to collect applications, feedback, etc. that you want to receive from your users in the application

1. Prepare the database with the required form fields

 

Add a button and set an action

You will receive notifications to your email and you can also manage messages in the database settings

That's it, you did it!

Media

1. Radio ( Is in development )

Using the Radio component, you can add streaming radio to your application. The component looks like a simple icon when you click on it, playback occurs.

It's very easy to set up, but you need the right streaming URL.

Example URL for our "Radio" function :

Note:

Since Apple is requiring apps to use IPV6 networks, streams URL needs a domain name and not an IP to work properly on iOS : https://www.hosting-serv.com:9110 rather than https://62.210.36.44:9110/

Note: 

The AACP/AAC+ audio format is not supported by Mozilla Firefox web browser. If the Radio feature does not work, check that you are not trying to open a AAC+ stream with Firefox. It works perfectly with Chromium/Chrome.

Note: 

Android 9 requires now that all URL use https, so stream URL must use https

 

2. YouTube

The YouTube component allows you to embed your video

Example: to insert a Youtube video https://youtu.be/460mLzgrzEc you only need the video ID — " 460mLzgrzEc ".

 

 

 

3. Audio Player

The player is designed to play audio in your application. You can create podcasts, audiobooks, etc.

To configure you will need a link to your audio file: Song Url * (https://example.com/song.mp3)

and a link to your cover image Album Url * (https://example.com/image.png)

You can connect audio output from your database

 

4. Vimeo Player

Add the component to the screen and specify the link to your video in Vimeo in the settings

5. Video Player

The video player supports the mp4 format. You need to add a link to a remote server with your video

Simple

 

1. Button

Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way.

 

2. Icon

Icon is a simple component made available through the Ionicons library. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.

 

3. Toast

A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.

Note: The component is invisible on the page

 

4. Fabs

Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fabs should have one main fab button. Fabs can also contain one or more fab lists which contain related buttons that show when the main fab button is clicked.

Positioning​
In order to place the fab in a fixed position, it should be assigned to the fixed slot of the outer content component. Use the vertical and horizontal props to control the alignment of the fab in the viewport. The edge prop will cause the fab button to overlap with the app's header or footer.

 

5. Cards

Cards are containers that display content such as text, images, buttons, and lists. A card can be a single component, but is often made up of a header, title, subtitle, and content. Cards are broken up into several components to accommodate this structure: card header, card title, card subtitle, and card content.

At the moment there are three components: Avatar list, Simple list and Card List. They all have the same functions and settings and differ only in appearance.

Lists can be used to connect to databases, display categories and other topics with a transition to a detailed page.

You can also set them up as a navigation menu.

 

6. Breadcrumbs

Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs.

 

7. Chips

Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.

 

8. Lottie

Lottie is a component that displays After Effects animation in real time, allowing applications to use animation as easily as a static image.