tag correction

Author: pinkeshmars

docs/resources/ui/components/built-in-components/barcode.md

@@ -6,7 +6,7 @@ tags: [Base Elements]
 
 # Barcode
 
-The Barcode widget is used to embed the information inside the series of lines and patterns. The data inside the barcode can be easily retried with a scanner machine, an app like [Google Lens](https://lens.google/) (Android), [Apple Camera](https://support.apple.com/en-in/HT208843) (iOS), or your [own app](#) created using FlutterFlow.
+The Barcode widget is used to embed the information inside the series of lines and patterns. The data inside the barcode can be easily retried with a scanner machine, an app like [Google Lens](https://lens.google/) (Android), [Apple Camera](https://support.apple.com/en-in/HT208843) (iOS), or your [own app](#scan-barcode--qr-code-action) created using FlutterFlow.
 
 
 It is typically used to retrieve product information quickly and accurately. For example, you could track the inventory/books (e.g., price, description, location, etc.), share website/app URL, quick onboarding process, and so on.
@@ -127,3 +127,72 @@ You can also display the actual data below the barcode by enabling the **Show Te
 This option is only available when using the *1D Barcode*.
 :::
 
+
+## Scan Barcode / QR code [Action]
+
+Using this Action, you open a barcode or QR code interface and scan a code using the device camera.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/tI9UOnpYhVyOrvxhmAuo?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+Follow the steps below to define a Scan Action to any widget.
+
+1. Select **Actions** from the Properties panel (the right menu)
+2. Click **+ Add Action** button
+3. Choose a gesture from the dropdown among ***On Tap**, **On Double Tap**, or* **On Long Press**
+4. Select the **Action Type** as ***Scan Barcode/QR code**.*
+5. If you check the **Barcode Mode** checkbox then the UI will look like a barcode scanner. Otherwise, the UI will be like a QR code scanner.
+6. **Cancel button text** would be ***Cancel*** by default, but you can specify any other text if you want.
+7. In the **Output Variable Name** field, you can specify the name of the variable where the scanned text would be saved and then you can access it via the **Set from Variable menu > Action Outputs > [Action Output Variable Name]**.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/Uk6JLbnrMDFFAACn5No6?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+
+

docs/resources/ui/components/built-in-components/color-picker.md

@@ -1,8 +1,8 @@
 ---
 slug: color-picker
 title: Color Picker
-tags: [Layout Elements, Components]
-keywords: [Color Picker, Layout Element, Component, Action]
+tags: [Actions, Components]
+keywords: [Color Picker, Component, Action]
 description: Learn how to add Color Picker in your FlutterFlow app.
 ---
 import Tabs from '@theme/Tabs';

docs/resources/ui/components/built-in-components/datetime-picker.md

@@ -1,8 +1,8 @@
 ---
 slug: datetime-picker
 title: DateTime Picker
-tags: [Layout Elements, Components]
-keywords: [DateTime Picker, Layout Element, Component, Action]
+tags: [Actions, Components]
+keywords: [DateTime Picker, Component, Action]
 description: Learn how to add DateTime Picker in your FlutterFlow app.
 ---
 # DateTime Picker

docs/resources/ui/components/built-in-components/scan-barcode.md

@@ -1,8 +1,8 @@
 ---
 slug: signature
 title: Signature
-tags: [Layout Elements, Components]
-keywords: [Signature, Layout Element, Component, Widget]
+tags: [Form Elements, Components]
+keywords: [Signature, Form Element, Component, Widget]
 description: Learn how to add Signature widget in your FlutterFlow app.
 ---