Andronautic
Back to blog
WebsiteBackoffice

Sailing Club

Published on August 19, 2022· Andronautic Team

Settings from your website and backoffice account.

To access the app from the backoffice, you’ll find it in the left-hand menu under App > Boat Club.

The app’s home page will open in the browser, for example: https://demo.andronautic.com/en/club-pwa. The club-pwa SLUG will change as soon as we edit the app from the CMS.

Settings from the CMS

Here you can change the colors, images, and logos. To do this, go to the admin panel Site > Administration > CLUB.

App Customization

Initial app settings (icons, logos…).

General:

  • App title: the title that will appear in the browser tab; if installed on a mobile device, this will be the app’s name.
  • Allow register users: allows new users to register from the app.

Images:

  • Icon: the app’s icon image, used when installed on a mobile device, and as the favicon in the browser. The image must be 160x160px.
  • Logo: the first screen the user sees while the app is loading; if no logo is added, it will use the one defined on the website under Site customization.
  • Header: a small header used for the app’s pages.
  • Login: background image during the login / registration process; if no image is set, a gradient color defined in the Theme section will be shown instead.
  • Dashboard: header image for the customer’s dashboard page, the first screen shown right after logging in.

Advanced:

  • Custom head: space to add extra code between the <head>...</head> tags, for example to add new fonts, meta tags, tracking metrics, etc.
  • Custom CSS: add a .css file to customize styles.
  • Custom JS: add a .js file to add JavaScript.

Initial Slides

These are the images and text shown before logging in or registering. If more than one image is activated, they will appear as a carousel.

At the top right, you’ll find the button to add a new slide; you can add as many as you like. When creating one, the following fields are configured:

  • Languages the slide will be shown in; if left empty, it will be treated as if it didn’t exist.
  • Active: check to enable or disable the slide.
  • Title: the slide’s title.
  • Image: the slide’s image; we recommend a 9:19 aspect ratio.
  • Text displayed over the slide.

Themes

Configuration of the app’s colors.

  • Primary color: used for key text, buttons, and important actions. We recommend it be darker than the secondary color.
  • Secondary color: background of the header and footer, cards, and information.
  • Text Main color: text used when the primary color is the background, for example on buttons.
  • Text plain color: regular text (port information, boat details…).

Welcome Slides

This is the image and text shown once the user creates their account; this screen only appears once. If no image is added, this screen will display with the primary color as its background.

At the top right, you’ll find the button to add a new slide; you can add as many as you like. When creating one, the following fields are configured:

  • Languages the slide will be shown in; if left empty, it will be treated as if it didn’t exist.
  • Active: check to enable or disable the slide.
  • Title: the slide’s title.
  • Image: the slide’s image; we recommend a 9:19 aspect ratio.
  • Text displayed over the slide.

Management from the backoffice

Creating Bases

Ports from which the end customer can book a boat. Bases are added from Settings > My Profile > Offices. Create a new office and, very importantly, link the zone associated with the port.

Note: if the port you need doesn’t appear in the ZONE list, ports are configured from Settings > My Profile > Details tab > Operating Zones section.

For this base to have its own image in the app, go to the Documents tab and add the image. Under Advanced Options, it’s important that the description matches the port’s name.

Boats for the app

To enable the boats used in the app, they must be enabled from the boat’s record under Catalog > Boats; inside you’ll find a section called Boat Club.

Customer

From CRM > Customers, add a new customer or edit an existing one, and activate their access to the club app from the CLUB tab by adding a password.

  • Secondary member email: the customer can share their CLUB account; this is where that email is added.
  • Active ports: active ports for the customer.
  • Base port: default port used when searching from the app.
  • Plan: you can choose between:
    • Free: the customer can use the app but pays for the boats.
    • Member: the customer gets a discount.
  • Range: available boat ranges for the app; configured from Andronautic — contact support@andronautic.com for this.
  • Type: (not yet activated).
  • Custom boats: instead of using the range, you can select the specific boats the customer can see in the app. When used, this overrides the range field.
  • Free extras: selection of free extras.
  • Number of prebookings: number of bookings the customer has made but not used.
  • Available individual days: total days the user can book during their subscription.

How to install the app on a mobile device

The Sailing Club app is not installed or downloaded; instead, a shortcut is created on the mobile device’s home screen. Check with our support team for the specific steps on iPhone and Android.