-
-
-
+
-
-
-
2: Configure your app
-
Configure
-
- Tap the button above, or manually enable Use custom server and enter:
-
-
Homeserver:
-
Identity server:
+
+
+
+
+
+
+
+
+
+ The desktop site does
+ not work on mobile, please download the app.
+
+
+
+
+ 1
+
+
+
Download Element
+
+
+ Also available on
+ F-Droid
+
+
-
-
-
-
- Please note the Desktop site does not work on mobile.
-
-
+
+
+
+ 2
+
+
+
Come back here to sign in
+
This will set up your app
+
Sign in
+
+
+
+
+
+
diff --git a/src/vector/mobile_guide/index.ts b/src/vector/mobile_guide/index.ts
index ae769039a8e..0b27624f50b 100644
--- a/src/vector/mobile_guide/index.ts
+++ b/src/vector/mobile_guide/index.ts
@@ -5,9 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
+import "./index.css";
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/600.css";
+
import { logger } from "matrix-js-sdk/src/logger";
import { getVectorConfig } from "../getconfig";
+import { type MobileAppVariant, mobileApps, updateMobilePage } from "./mobile-apps.ts";
function onBackToElementClick(): void {
// Cookie should expire in 4 hours
@@ -38,18 +43,19 @@ function renderConfigError(message: string): void {
}
async function initPage(): Promise
{
- document.getElementById("back_to_element_button")!.onclick = onBackToElementClick;
-
const config = await getVectorConfig("..");
// We manually parse the config similar to how validateServerConfig works because
// calling that function pulls in roughly 4mb of JS we don't use.
const wkConfig = config?.["default_server_config"]; // overwritten later under some conditions
- const serverName = config?.["default_server_name"];
+ let serverName = config?.["default_server_name"];
const defaultHsUrl = config?.["default_hs_url"];
const defaultIsUrl = config?.["default_is_url"];
+ const appVariant = (config?.["mobile_guide_app_variant"] ?? "x") as MobileAppVariant;
+ const metadata = mobileApps[appVariant];
+
const incompatibleOptions = [wkConfig, serverName, defaultHsUrl].filter((i) => !!i);
if (defaultHsUrl && (wkConfig || serverName)) {
return renderConfigError(
@@ -66,6 +72,7 @@ async function initPage(): Promise {
if (!serverName && typeof wkConfig?.["m.homeserver"]?.["base_url"] === "string") {
hsUrl = wkConfig["m.homeserver"]["base_url"];
+ serverName = wkConfig["m.homeserver"]["server_name"];
if (typeof wkConfig["m.identity_server"]?.["base_url"] === "string") {
isUrl = wkConfig["m.identity_server"]["base_url"];
@@ -110,21 +117,21 @@ async function initPage(): Promise {
if (hsUrl && !hsUrl.endsWith("/")) hsUrl += "/";
if (isUrl && !isUrl.endsWith("/")) isUrl += "/";
- if (hsUrl !== "https://matrix.org/") {
- let url = "https://mobile.element.io?hs_url=" + encodeURIComponent(hsUrl);
+ let deepLinkUrl = `https://mobile.element.io${metadata.deepLinkPath}`;
+ if (metadata.usesLegacyDeepLink) {
+ deepLinkUrl += `?hs_url=${encodeURIComponent(hsUrl)}`;
if (isUrl) {
- document.getElementById("custom_is")!.style.display = "block";
- document.getElementById("is_url")!.style.display = "block";
- document.getElementById("is_url")!.innerText = isUrl;
- url += "&is_url=" + encodeURIComponent(isUrl ?? "");
+ deepLinkUrl += `&is_url=${encodeURIComponent(isUrl)}`;
}
-
- (document.getElementById("configure_element_button") as HTMLAnchorElement).href = url;
- document.getElementById("step1_heading")!.innerHTML = "1: Install the app";
- document.getElementById("step2_container")!.style.display = "block";
- document.getElementById("hs_url")!.innerText = hsUrl;
+ } else if (serverName) {
+ deepLinkUrl += `?account_provider=${serverName}`;
}
+
+ // Not part of updateMobilePage as the link is only shown on mobile_guide and not on mobile.element.io
+ document.getElementById("back_to_element_button")!.onclick = onBackToElementClick;
+
+ updateMobilePage(metadata, deepLinkUrl, serverName ?? hsUrl);
}
void initPage();
diff --git a/src/vector/mobile_guide/mobile-apps.ts b/src/vector/mobile_guide/mobile-apps.ts
new file mode 100644
index 00000000000..ab2ff2240aa
--- /dev/null
+++ b/src/vector/mobile_guide/mobile-apps.ts
@@ -0,0 +1,88 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/*
+ * Shared code that is used by the mobile guide and the mobile.element.io site.
+ */
+
+export enum MobileAppVariant {
+ Classic = "classic",
+ X = "x",
+ Pro = "pro",
+}
+
+export interface MobileAppMetadata {
+ name: string;
+ appleAppId: string;
+ appStoreUrl: string;
+ playStoreUrl: string;
+ fDroidUrl?: string;
+ deepLinkPath: string;
+ usesLegacyDeepLink: boolean;
+ isProApp: boolean;
+}
+
+export const mobileApps: Record = {
+ [MobileAppVariant.Classic]: {
+ name: "Element",
+ appleAppId: "id1083446067",
+ appStoreUrl: "https://apps.apple.com/app/element-messenger/id1083446067",
+ playStoreUrl: "https://play.google.com/store/apps/details?id=im.vector.app",
+ fDroidUrl: "https://f-droid.org/packages/im.vector.app",
+ deepLinkPath: "",
+ usesLegacyDeepLink: true,
+ isProApp: false,
+ },
+ [MobileAppVariant.X]: {
+ name: "Element X",
+ appleAppId: "id1631335820",
+ appStoreUrl: "https://apps.apple.com/app/element-x-secure-chat-call/id1631335820",
+ playStoreUrl: "https://play.google.com/store/apps/details?id=io.element.android.x",
+ fDroidUrl: "https://f-droid.org/packages/io.element.android.x",
+ deepLinkPath: "/element",
+ usesLegacyDeepLink: false,
+ isProApp: false,
+ },
+ [MobileAppVariant.Pro]: {
+ name: "Element Pro",
+ appleAppId: "id6502951615",
+ appStoreUrl: "https://apps.apple.com/app/element-pro-for-work/id6502951615",
+ playStoreUrl: "https://play.google.com/store/apps/details?id=io.element.enterprise",
+ deepLinkPath: "/element-pro",
+ usesLegacyDeepLink: false,
+ isProApp: true,
+ },
+};
+
+export function updateMobilePage(metadata: MobileAppMetadata, deepLinkUrl: string, server: string | undefined): void {
+ const appleMeta = document.querySelector('meta[name="apple-itunes-app"]') as Element;
+ appleMeta.setAttribute("content", `app-id=${metadata.appleAppId}`);
+
+ if (server) {
+ (document.getElementById("header_title") as HTMLHeadingElement).innerText = `Join ${server} on Element`;
+ }
+ (document.getElementById("app_store_link") as HTMLAnchorElement).href = metadata.appStoreUrl;
+ (document.getElementById("play_store_link") as HTMLAnchorElement).href = metadata.playStoreUrl;
+
+ if (metadata.fDroidUrl) {
+ (document.getElementById("f_droid_link") as HTMLAnchorElement).href = metadata.fDroidUrl;
+ } else {
+ document.getElementById("f_droid_section")!.style.display = "none";
+ }
+
+ const step1Heading = document.getElementById("step1_heading")!;
+ step1Heading.innerHTML = step1Heading!.innerHTML.replace("Element", metadata.name);
+
+ // Step 2 is only shown on the mobile guide, not on mobile.element.io
+ if (document.getElementById("step2_container")) {
+ document.getElementById("step2_container")!.style.display = "block";
+ if (metadata.isProApp) {
+ document.getElementById("step2_description")!.innerHTML = "Use your work email to join";
+ }
+ (document.getElementById("deep_link_button") as HTMLAnchorElement).href = deepLinkUrl;
+ }
+}
diff --git a/webpack.config.js b/webpack.config.js
index e0d7d4fe933..bc5b405232b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -679,6 +679,12 @@ module.exports = (env, argv) => {
context: path.resolve(__dirname, "node_modules/@element-hq/element-call-embedded/dist"),
to: path.join(__dirname, "webapp", "widgets", "element-call"),
},
+ // Mobile guide assets
+ {
+ from: "assets/**",
+ context: path.resolve(__dirname, "src/vector/mobile_guide"),
+ to: "mobile_guide",
+ },
],
}),
@@ -771,6 +777,8 @@ module.exports = (env, argv) => {
function getAssetOutputPath(url, resourcePath) {
const isKaTeX = resourcePath.includes("KaTeX");
const isFontSource = resourcePath.includes("@fontsource");
+ const mobileGuideAssetsPath = path.join("mobile_guide", "assets");
+ const isMobileGuide = resourcePath.includes(mobileGuideAssetsPath);
// `res` is the parent dir for our own assets in various layers
// `dist` is the parent dir for KaTeX assets
// `files` is the parent dir for @fontsource assets
@@ -804,6 +812,11 @@ function getAssetOutputPath(url, resourcePath) {
outputDir = "fonts";
}
+ if (isMobileGuide) {
+ // Specific handling for the mobile guide assets, as they live alongside the page sources.
+ outputDir = mobileGuideAssetsPath;
+ }
+
if (isKaTeX) {
// Add a clearly named directory segment, rather than leaving the KaTeX
// assets loose in each asset type directory.
+ 
+