DOC-3215: Docs changes for new onboarding feature. (#3726)

kemister85 · ShiridiGandham · web-flow · commit 9c2eab4bd252 · 2025-05-15T10:01:23.000+10:00
* DOC-3215: Docs changes for new onboarding feature. * Update modules/ROOT/pages/cloud-troubleshooting.adoc * Update modules/ROOT/pages/cloud-troubleshooting.adoc * Update modules/ROOT/partials/configuration/onboarding.adoc * DOC-3151: coipy edits, and changes. * DOC-3151: Refine cloud troubleshooting documentation for invalid API key errors. * DOC-3151: Remove trail-explore-features.png file. * Update modules/ROOT/pages/cloud-troubleshooting.adoc Co-authored-by: shirqa <43625458+ShiridiGandham@users.noreply.github.com> * DOC-3151: fix level heading. --------- Co-authored-by: shirqa <43625458+ShiridiGandham@users.noreply.github.com>
diff --git a/modules/ROOT/images/onboarding/onboarding-finish-setting-up-dialog.png b/modules/ROOT/images/onboarding/onboarding-finish-setting-up-dialog.png
diff --git a/modules/ROOT/images/onboarding/onboarding-no-api-key-notification.png b/modules/ROOT/images/onboarding/onboarding-no-api-key-notification.png
diff --git a/modules/ROOT/pages/7.8.0-release-notes.adoc b/modules/ROOT/pages/7.8.0-release-notes.adoc
@@ -257,14 +257,6 @@ tinymce.init({
 </p>
 ----
 
-// === New `onboarding` option
-// // #TINY-11931
-
-// {productname} {release-version} introduces a new `+onboarding+` option to enhance the developer experience during the 14-day trial period. This option controls the display of a cloud promotion banner highlighting paid features available during the trial. The banner is automatically hidden when the trial ends or when the editor is correctly configured, ensuring a smoother and less intrusive setup experience.
-
-// For more information, see xref:promotions.adoc#onboarding[onboarding].
-
-
 [[bug-fixes]]
 == Bug fixes
 
diff --git a/modules/ROOT/pages/7.9.0-release-notes.adoc b/modules/ROOT/pages/7.9.0-release-notes.adoc
@@ -161,6 +161,13 @@ Previously, {productname} did not offer a separate `disc` styling option for uno
 </ul>
 ----
 
+=== New `onboarding` option
+// #TINY-11931
+
+{productname} {release-version} introduces a new `+onboarding+` option to enhance the developer experience during the 14-day trial period. This option controls the display of a cloud promotion banner highlighting paid features available during the trial. The banner is automatically hidden when the trial ends or when the editor is correctly configured, ensuring a smoother and less intrusive setup experience.
+
+For more information, see xref:promotions.adoc#onboarding[onboarding].
+
 [[changes]]
 == Changes
 
diff --git a/modules/ROOT/pages/changelog.adoc b/modules/ROOT/pages/changelog.adoc
@@ -9,6 +9,8 @@ NOTE: This is the {productname} Community version changelog. For information abo
 === Added
 * Added new `disc` style option for unordered lists.
 // #TINY-12015
+* New `onboarding` option.
+// #TINY-11931
 
 === Improved
 * The resize cursor now points in the correct direction for each resize mode. Patch contributed by link:https://github.com/daniloff200[daniloff200].
@@ -49,8 +51,6 @@ NOTE: This is the {productname} Community version changelog. For information abo
 // #TINY-11748
 * New `extended_mathml_attributes` and `extended_mathml_elements` options.
 // #TINY-11756
-* New `onboarding` option.
-// #TINY-11931
 
 === Improved
 * Focus outline was misaligned with comment card border on saving an edit.
diff --git a/modules/ROOT/pages/cloud-troubleshooting.adoc b/modules/ROOT/pages/cloud-troubleshooting.adoc
@@ -8,63 +8,86 @@ When {cloudname} detects a problem, it will show an editor notification containi
 NOTE: The wording of the notifications shown here may differ from the actual notifications from {cloudname}.
 
 '''
-
 [[invalid-api-key-cloud-troubleshooting]]
 == Invalid API Key
 
 [[A-valid-API-key-is-required-to-continue-using-TinyMCE.-Please-alert-the-admin-to-check-the-current-API-key]]
 === "A valid API key is required to continue using {productname}. **Please alert the admin** to check the current API key. xref:invalid-api-key.adoc[Click here to learn more.]"
 
-==== Cause "No API Key"
+==== Cause
+
+This notification is shown when either:
+
+* An `+apiKey+` is not provided in the script tag,
+* An empty or missing `+apiKey+` is provided, or
+* The `+apiKey+` provided cannot be found on the {cloudname} server.
 
-This notification is *only shown* when either:
+The `+apiKey+` must be:
 
-* An `+apiKey+` is not provided in the script tag.
-* `+no-api-key+` is provided as the API key.
+* An exact length,
+* comprised of certain characters, and
+* created with a {cloudname} account on the link:{accountsignup}/[{accountpage} page].
 
 For example:
 
 [source,html,subs="attributes+"]
 ----
-<script src="{cdnurl}" referrerpolicy="origin"></script>
+<script src="https://cdn.tiny.cloud/1/abcd1234/tinymce/{productmajorversion}/tinymce.min.js" referrerpolicy="origin"></script>
 ----
 
+In this case, the editor will be in a **read-only** state, and a notification appears stating: **"A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more."**
+
 ==== Solution
 
-Update the `+src+` URL to include your (website or application developer's) {cloudname} API Key. Your API key should replace the string `+no-api-key+`.
+To resolve this issue:
 
+. Update the `+src+` URL to include your (website or application developer's) {cloudname} API Key, by replacing the placeholder `+no-api-key+` with your actual API key.
++
 For example: if your API is `+abcd1234+`:
-
++
 [source,html,subs="attributes+"]
 ----
 <script src="https://cdn.tiny.cloud/1/abcd1234/tinymce/{productmajorversion}/tinymce.min.js" referrerpolicy="origin"></script>
 ----
++
+. Check the `+apiKey+` provided in the script tag:
+* Remove any leading or trailing spaces.
+* Remove any other characters that are not in your `apiKey`. If you are using variable substitution, ensure that the variable is substituting properly.
+* Ensure the `apiKey+` matches the API key shown at {accountpageurl}.
++
+. If you do not have an API key, or need to retrieve your existing key, visit: link:{accountsignup}/[{cloudname}].
 
-To retrieve your API key, or to sign up for an API key, visit: link:{accountsignup}/[{cloudname}].
+[NOTE]
+Visit our xref:invalid-api-key.adoc[Invalid API key] page for more information on how to fix an `invalid API key` issue with {productname}.
 
-NOTE: Visit our xref:invalid-api-key.adoc[Invalid API key] page for more information on how to fix a `invalid API key` with {productname}.
+'''
 
-==== Cause "Invalid API Key"
+[[no-api-key-cloud-troubleshooting]]
+== No API Key
 
-This notification is shown when the API key provided cannot be found on the {cloudname} server.
+[[A-valid-API-key-is-required-to-continue-using-TinyMCE.]]
+=== "A valid API key is required to continue using {productname}." (Console message)
 
-The `+apiKey+` must be:
+==== Cause
 
-* An exact length,
-* comprised of certain characters, and
-* created with a {cloudname} account on the link:{accountsignup}/[{accountpage} page].
+When `+no-api-key+` is set as the `+apiKey+` the editor will be in a **read-only** state, and the user will see a **"Finish setting up"** dialog prompting them to add a valid API key, configure their domain, and explore premium features.
+
+image:onboarding/onboarding-finish-setting-up-dialog.png[onboarding finish setting up dialog, width=500, height=auto]
 
 ==== Solution
 
-Check the `apiKey` provided in the script tag:
+. Update the `+src+` URL to include your (website or application developer's) {cloudname} API Key, by replacing the placeholder `+no-api-key+` with your actual API key.
 
-* Remove any leading or trailing spaces
-* Remove any other characters that are not in your `apiKey`. If you are using variable substitution, ensure that the variable is substituting properly
-* Ensure the `apiKey` matches the API key shown at {accountpageurl}.
+For example: if your API is `+abcd1234+`:
 
-NOTE: Visit our xref:invalid-api-key.adoc[Invalid API key] page for more information on how to fix a `invalid API key` with {productname}.
+[source,html,subs="attributes+"]
+----
+<script src="https://cdn.tiny.cloud/1/abcd1234/tinymce/{productmajorversion}/tinymce.min.js" referrerpolicy="origin"></script>
+----
 
-'''
+To retrieve your API key, or to sign up for an API key, visit: link:{accountsignup}/[{cloudname}].
+
+''''
 
 [[domain-not-registered]]
 == Domain Not Registered
diff --git a/modules/ROOT/pages/export-to-pdf-with-jwt-authentication-nodejs.adoc b/modules/ROOT/pages/export-to-pdf-with-jwt-authentication-nodejs.adoc
@@ -29,7 +29,7 @@ Inside the `public` folder where you created the `index.html` file add the HTML
 <head>
   <title>TinyMCE with Export to PDF</title>
   <script 
-    src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js"
+    src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
     referrerpolicy="origin">
   </script>
   <script>
diff --git a/modules/ROOT/pages/export-to-pdf-with-jwt-authentication-php.adoc b/modules/ROOT/pages/export-to-pdf-with-jwt-authentication-php.adoc
@@ -28,7 +28,7 @@ Inside the `public` folder where you created the `index.html` file add the HTML
 <head>
   <title>TinyMCE with PDF Export</title>
   <script 
-    src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js"
+    src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
     referrerpolicy="origin">
   </script>
   <script>
diff --git a/modules/ROOT/pages/export-to-word-with-jwt-authentication-nodejs.adoc b/modules/ROOT/pages/export-to-word-with-jwt-authentication-nodejs.adoc
@@ -29,7 +29,7 @@ Inside the `public` folder where you created the `index.html` file add the HTML
 <head>
   <title>TinyMCE with Export to Word</title>
   <script 
-    src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js"
+    src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
     referrerpolicy="origin">
   </script>
   <script>
diff --git a/modules/ROOT/pages/export-to-word-with-jwt-authentication-php.adoc b/modules/ROOT/pages/export-to-word-with-jwt-authentication-php.adoc
@@ -28,7 +28,7 @@ Inside the `public` folder where you created the `index.html` file add the HTML
 <head>
   <title>TinyMCE with Word Export</title>
   <script 
-    src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js"
+    src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
     referrerpolicy="origin">
   </script>
   <script>
diff --git a/modules/ROOT/pages/import-from-word-with-jwt-authentication-nodejs.adoc b/modules/ROOT/pages/import-from-word-with-jwt-authentication-nodejs.adoc
@@ -29,7 +29,7 @@ Inside the `public` folder where you created the `index.html` file add the HTML
 <head>
   <title>TinyMCE with Import from Word</title>
   <script 
-    src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js"
+    src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
     referrerpolicy="origin">
   </script>
   <script>
diff --git a/modules/ROOT/pages/import-from-word-with-jwt-authentication-php.adoc b/modules/ROOT/pages/import-from-word-with-jwt-authentication-php.adoc
@@ -28,7 +28,7 @@ Inside the `public` folder where you created the `index.html` file add the HTML
 <head>
   <title>TinyMCE with Word Import</title>
   <script 
-    src="https://cdn.tiny.cloud/1/YOUR-API-KEY/tinymce/7/tinymce.min.js"
+    src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js"
     referrerpolicy="origin">
   </script>
   <script>
diff --git a/modules/ROOT/pages/migration-from-froala.adoc b/modules/ROOT/pages/migration-from-froala.adoc
@@ -38,10 +38,10 @@ To migrate from a basic Froala 3 configuration to a basic {productname} {product
 +
 [source,html,subs="attributes+"]
 ----
-<script src='https://cdn.tiny.cloud/1/your-api-key/tinymce/{productmajorversion}/tinymce.min.js' referrerpolicy='origin'></script>
+<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}/tinymce.min.js' referrerpolicy='origin'></script>
 ----
 +
-Replace `+your-api-key+` with your link:{accountpageurl}/[{cloudname} API key].
+Replace `+no-api-key+` with your link:{accountpageurl}/[{cloudname} API key].
 * For Self-hosted {productname} deployments:
 +
 [source,html]
diff --git a/modules/ROOT/partials/auth/document-converters/nodejs/configuration-steps.adoc b/modules/ROOT/partials/auth/document-converters/nodejs/configuration-steps.adoc
@@ -2,7 +2,7 @@
 
 === Add Your API Key
 
-* Replace `YOUR-API-KEY` in both files with your actual {productname} API key
+* Replace `no-api-key` in both files with your actual {productname} API key
 * The API key should be the same in both the HTML script source and the JWT payload
 
 === Add Your Private Key
diff --git a/modules/ROOT/partials/auth/document-converters/nodejs/server-setup-jwt.adoc b/modules/ROOT/partials/auth/document-converters/nodejs/server-setup-jwt.adoc
@@ -24,7 +24,7 @@ app.use(express.static(path.join(__dirname, 'public')));
 // JWT token generation endpoint
 app.post('/jwt', (req, res) => {
     const payload = {
-        aud: 'YOUR-API-KEY', // Replace with your actual API key
+        aud: 'no-api-key', // Replace with your actual API key
         iat: Math.floor(Date.now() / 1000), // Issue timestamp
         exp: Math.floor(Date.now() / 1000) + (60 * 10) // Expiration time (10 minutes)
     };
diff --git a/modules/ROOT/partials/auth/document-converters/php/configuration-steps.adoc b/modules/ROOT/partials/auth/document-converters/php/configuration-steps.adoc
@@ -2,7 +2,7 @@
 
 === Add Your API Key
 
-* Replace `YOUR-API-KEY` in both files with your actual {productname} API key
+* Replace `no-api-key` in both files with your actual {productname} API key
 * The API key should be the same in both the HTML script source and the JWT payload
 
 === Add Your Private Key
diff --git a/modules/ROOT/partials/auth/document-converters/php/server-setup-php.adoc b/modules/ROOT/partials/auth/document-converters/php/server-setup-php.adoc
@@ -25,7 +25,7 @@ header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Ac
 
 // JWT payload
 $payload = array(
-    "aud" => "YOUR-API-KEY",
+    "aud" => "no-api-key",
     "iat" => time(), // Issue timestamp
     "exp" => time() + 60 * 10 // Expiration time (10 minutes)
 );
diff --git a/modules/ROOT/partials/integrations/swing-quick-start.adoc b/modules/ROOT/partials/integrations/swing-quick-start.adoc
@@ -26,11 +26,11 @@ The Swing integration allows the user to select the origin of the {productname}
 ----
 final Config myTinyConfiguration = Config.embedded();
 ----
-* Cloud deployments pull {productname} from the {cloudname}. Use this option by passing your API key and xref:editor-plugin-version.adoc#specifying-the-tinymce-editor-version-deployed-from-cloud[specifying the {cloudname} version].
+* Cloud deployments pull {productname} from the {cloudname}. Use this option by passing your API key and xref:editor-plugin-version.adoc#specifying-the-tinymce-editor-version-deployed-from-cloud[specifying the {cloudname} version]. Ensure you replace `<no_api_key>` with your API key.
 +
 [source,java,subs="attributes+"]
 ----
-final Config myTinyConfiguration = Config.cloud("<my_api_key>", "{productmajorversion}-stable");
+final Config myTinyConfiguration = Config.cloud("<no_api_key>", "{productmajorversion}-stable");
 ----
 * External deployments allow to use a local version of {productname} by giving the address of the location where {productname} is being served.
 +
diff --git a/modules/ROOT/partials/misc/premium-upgrade-promotion-option.adoc b/modules/ROOT/partials/misc/premium-upgrade-promotion-option.adoc
@@ -2,6 +2,6 @@
 
 include::partial$configuration/promotion.adoc[leveloffset=+1]
 
-// == Cloud promotion
+== Cloud promotion
 
-// include::partial$configuration/onboarding.adoc[leveloffset=+1]
+include::partial$configuration/onboarding.adoc[leveloffset=+1]
