# FlyMate - PageFly's AI Assistant

### Overview <a href="#kz8qqtqzbz1e" id="kz8qqtqzbz1e"></a>

{% hint style="warning" %}
**Important Note**: Feature is currently in beta testing phase. Only available to early-bird users and new users during initial rollout period
{% endhint %}

FlyMate is PageFly's AI-powered assistant designed to simplify, guide, and optimize every step of the page-building journey inside PageFly. This beta feature combines intelligent navigation, real-time guidance, smart content creation, and design modification to help merchants build better pages faster, easier, and with more confidence.

**Prerequisites:**

* Active PageFly account
* Access to PageFly Editor or Dashboard
* No additional setup required - FlyMate is ready to use immediately

### Feature Introduction <a href="#sslzw5hlvai9" id="sslzw5hlvai9"></a>

FlyMate serves as your AI co-pilot within PageFly, helping you navigate, learn, create, style, and optimize your PageFly store pages with real-time assistance, intelligent recommendations, and effortless design support. The AI assistant operates through natural language prompts and automatically detects your intent to provide the most relevant assistance.

### Core Capabilities <a href="#id-89s98a9icwxg" id="id-89s98a9icwxg"></a>

FlyMate operates through **4 core Intent groups**, each representing specific capability areas:

### Content Creation Intent <a href="#z2of6ssx141" id="z2of6ssx141"></a>

* **Create New**: Generate complete pages, sections, or individual elements based on business goals or campaign descriptions
* **Template to Section**: Insert ready-made sections from PageFly's template library based on user prompts and requirements

### UI Modification Intent (Editor only, requires element/section selection) <a href="#v5hwau81t31l" id="v5hwau81t31l"></a>

* **Element-level modifications**: Style, content, and behavior changes for individual UI elements
* **Section-level modifications**: Layout and styling adjustments for entire sections
* **Real-time preview**: Changes are applied immediately with visual feedback

### Navigation Intent <a href="#id-99l94gg3glja" id="id-99l94gg3glja"></a>

* **Internal Editor Navigation**: Switch between tabs and panels (Elements, Settings, SEO, etc.)
* **External Editor Navigation**: Return to Dashboard, Page List, Templates
* **External Navigation**: Provides manual guidance for actions outside the current interface

### Learning & Support Intent <a href="#q5n9ye7e38l1" id="q5n9ye7e38l1"></a>

* **Contextual Help**: Step-by-step guidance based on current context
* **FAQ Access**: Instant answers to frequently asked questions
* **Error Guidance**: Troubleshooting suggestions for common issues
* **Tutorial Requests**: Detailed walkthroughs for specific features

### Example Use Cases or Prompts <a href="#fureux8y3rjx" id="fureux8y3rjx"></a>

#### Content Creation: <a href="#ag7afm4lhrpw" id="ag7afm4lhrpw"></a>

* "Create a hero section for a summer sale campaign"
* "Add a testimonial section for fashion products"
* "Generate a countdown timer for product launch"

#### UI Modification: <a href="#vn84so8h7y9y" id="vn84so8h7y9y"></a>

* "Make this section background black"
* "Increase padding in the hero section"
* "Center this product image"

#### Navigation: <a href="#id-7k8bxze0kqjx" id="id-7k8bxze0kqjx"></a>

* "Open Page Settings"
* "Switch to SEO Optimization panel"
* "Go to Theme Style"

#### Learning & Support: <a href="#blsn28l6dwma" id="blsn28l6dwma"></a>

* "How do I create a sticky header?"
* "Why is my button not aligned properly?"
* "How can I set up mobile responsiveness?"

### Step-by-step Instructions <a href="#tltpvl3km24m" id="tltpvl3km24m"></a>

### Accessing FlyMate <a href="#dyqyibfgm43p" id="dyqyibfgm43p"></a>

#### In PageFly Editor: <a href="#id-1thzpcl7a52s" id="id-1thzpcl7a52s"></a>

1. **Default state**: FlyMate sidebar opens automatically on the right side when you enter the Editor
2. **Manual control**: You can open/close FlyMate using the **FlyMate tab button** located in the top toolbar
3. **Interface**: The chat interface is immediately available for interaction when the sidebar is open
4. **Toggle functionality**: Click the FlyMate tab in the topbar to show/hide the sidebar as needed

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FY51I8VpUcrpq6x0Ez0yf%2Fimage1.gif?alt=media&#x26;token=208cf8e9-1501-444a-928d-e540d4fce0b8" alt=""><figcaption></figcaption></figure>

#### In PageFly Dashboard: <a href="#rz3msp1thg2g" id="rz3msp1thg2g"></a>

1. **Default state**: FlyMate sidebar opens automatically on the right side when you access the Dashboard
2. **If FlyMate is not open**: Look for the **floating FlyMate icon button** in the bottom-right corner of the screen
3. **Activation**: Click the floating button to open the FlyMate chat interface
4. **Interface**: The chat widget provides full functionality for content creation, navigation help, and support

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FBcxQOGihkukqk9wOFlFr%2Fimage2.gif?alt=media&#x26;token=f8461160-0256-44c8-801a-fbc6fe236dc3" alt=""><figcaption></figcaption></figure>

#### Additional Access Notes: <a href="#tlu6o96cwz7z" id="tlu6o96cwz7z"></a>

* FlyMate maintains consistent availability across all PageFly interfaces
* The sidebar position and functionality remain the same whether in Editor or Dashboard
* No additional setup or configuration required - FlyMate is ready to use immediately upon access

### Using FlyMate for Content Creation <a href="#id-1cggtv3iggbs" id="id-1cggtv3iggbs"></a>

#### Creating New Content: <a href="#r2pyvsxa8qji" id="r2pyvsxa8qji"></a>

1. In the FlyMate chat interface, type your content request
2. FlyMate will generate the requested content
3. Review the generated section/element
4. Added content to your page
5. Continue building or make additional requests

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FjGEJG0u1GoBKRl8sw0kk%2FUntitled%20750x350%20(2).png?alt=media&#x26;token=ae0a8581-43f8-4080-aa0b-03f741a20941" alt=""><figcaption></figcaption></figure>

#### Suggest Template Page: <a href="#id-83gkfeyi2ux1" id="id-83gkfeyi2ux1"></a>

1. Describe the type of Page Template you need
2. FlyMate will suggest relevant page template from PageFly's template library
3. Select your preferred option
4. The template is automatically inserted into your page

### Using FlyMate for UI Modifications <a href="#ec00dy5ngqcb" id="ec00dy5ngqcb"></a>

**Note:** UI Modification requires you to be in the Editor with an element or section selected.

#### Modifying Elements: <a href="#id-3cyj3shamrzh" id="id-3cyj3shamrzh"></a>

1. **Select** the element you want to modify in the Editor
2. Type your modification request to FlyMate
   * Example: "Change button color to red"
3. FlyMate applies the changes immediately
4. Review the modifications in real-time
5. Continue with additional changes if needed

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FCRvNGmaKKTB13cKkHCic%2Fimage3.png?alt=media&#x26;token=5ba880ed-5ef4-4ea8-8c7a-53eeffafd539" alt=""><figcaption></figcaption></figure>

#### Modifying Sections: <a href="#uhkvla1b802" id="uhkvla1b802"></a>

1. **Select** the entire section you want to modify
2. Describe your desired changes
   * Example: "Make this section full-width with centered content"
3. Changes are applied automatically
4. Verify the layout adjustments

### Using FlyMate for Navigation <a href="#id-1vzbtyfqywje" id="id-1vzbtyfqywje"></a>

#### Internal PageFly Navigation: <a href="#hwysn8xbc7z1" id="hwysn8xbc7z1"></a>

1. Request navigation to specific location
   * Example: "Open Analytics"
2. FlyMate will either:
   * Provide a button to complete the navigation

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2F3RiGAxYl3E8nBZZAwOaU%2FUntitled%20750x350%20(4).png?alt=media&#x26;token=c4079de0-22ef-4cf5-9341-59a9c1964254" alt=""><figcaption></figcaption></figure>

#### External PageFly Navigation: <a href="#pixqqqqthprx" id="pixqqqqthprx"></a>

Flymate currently doesn't support users navigating outside of the PageFly App.

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FI5EbngqndMXk7mofdSm6%2FUntitled%20750x350%20(5).png?alt=media&#x26;token=8496de24-436a-46d2-864e-967a2b4bfd3a" alt=""><figcaption></figcaption></figure>

### Getting Help and Support <a href="#id-5mogtbcbsnxl" id="id-5mogtbcbsnxl"></a>

#### Contextual Assistance: <a href="#yqhjcgz41hlx" id="yqhjcgz41hlx"></a>

1. Ask questions related to your current task
   * Example: "How do I make this section responsive?"
2. FlyMate provides relevant, context-aware guidance
3. Follow the provided instructions

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Fw5odKphT0pduLKVqufMP%2FUntitled%20(750%20x%20350%20px)%20(2).png?alt=media&#x26;token=8c9da719-d464-43c5-bba4-3c121d4b0228" alt=""><figcaption></figcaption></figure>

#### Troubleshooting: <a href="#ks36ofwk7rg6" id="ks36ofwk7rg6"></a>

1. Describe the issue you're experiencing
   * Example: "My images are not displaying correctly"
2. FlyMate analyzes the problem and provides solutions

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FCt66ZiXKwtkG7aWcwhxE%2FUntitled%20(750%20x%20350%20px)%20(3).png?alt=media&#x26;token=fe89a4fd-32ca-4ecc-9036-ba0dff561d29" alt=""><figcaption></figcaption></figure>

### Monitoring and Analytics <a href="#id-3d6vj3ryh3t4" id="id-3d6vj3ryh3t4"></a>

#### Conversation History <a href="#id-4nrpyjod3k56" id="id-4nrpyjod3k56"></a>

* All conversations are preserved within the current session
* Access previous exchanges through the chat panel
* Context is maintained throughout your session
* **Note:** Context is preserved even when switching between different pages

#### Session Management <a href="#z1ubu2pxx1on" id="z1ubu2pxx1on"></a>

* Each conversation maintains context for the duration of your session
* Starting a new conversation will reset the context
* Session data is not shared between different PageFly accounts

### Additional Notes and FAQs <a href="#w6udiry0r54q" id="w6udiry0r54q"></a>

### Language Support <a href="#dux32ksmbqbr" id="dux32ksmbqbr"></a>

* FlyMate supports multiple languages including English and Vietnamese
* Language detection is automatic based on your prompt
* Responses will match the language of your input

### Error Handling <a href="#o4mxwbk3vps1" id="o4mxwbk3vps1"></a>

**When FlyMate encounters unclear or unsupported requests:**

#### Off-topic Requests: <a href="#bglh4fsak1xt" id="bglh4fsak1xt"></a>

* FlyMate will politely redirect to PageFly-related tasks
* Example response: "I'm designed to help with PageFly page building. Could you rephrase your request related to creating or editing pages?"

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2FWZ133bJ4jgha9p9IJaU4%2FUntitled%20(750%20x%20350%20px)%20(4).png?alt=media&#x26;token=45a7982f-e386-41e5-9fc0-64c24620c159" alt=""><figcaption></figcaption></figure>

#### Unsupported Actions: <a href="#id-1i6xbb8xx0ql" id="id-1i6xbb8xx0ql"></a>

* Clear explanation of current limitations
* Alternative suggestions provided
* Example: "I can't directly integrate with external services, but I can help you create a contact form section."

**Ambiguous Prompts:**

* FlyMate will ask clarifying questions
* Multiple options may be presented for selection
* Example: "I can help with buttons. Are you looking to add a new button, style an existing one, or change button text?"

<figure><img src="https://2800568630-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLf471SpmnojuhVGQb2E%2Fuploads%2Ff9vVNvZ34ih3jZ7dMbZ9%2F11.png?alt=media" alt=""><figcaption></figcaption></figure>

### Network and Technical Issues <a href="#nvsmo7k9h03a" id="nvsmo7k9h03a"></a>

#### Offline/Connection Issues: <a href="#somfh5gjxsnu" id="somfh5gjxsnu"></a>

* "FlyMate is currently offline. Please check your connection and try again."
* Retry button provided for easy reconnection
* Previous conversation context preserved during brief disconnections

#### UI Modification Requirements: <a href="#ba3oj9dio4j0" id="ba3oj9dio4j0"></a>

* Error message: "Please select a section or element first to make modifications."
* Guidance provided on how to select elements properly

**Best Practices**

* Use specific, descriptive prompts for better results
* Select elements clearly before requesting UI modifications
* Review generated content for brand consistency
* Test functionality across different devices after making changes

### Frequently Asked Questions <a href="#u9nepyukggjm" id="u9nepyukggjm"></a>

**Q: Can FlyMate work without internet connection?**

A: No, FlyMate requires an active internet connection to function as it processes requests through AI servers.

**Q: Does FlyMate save my conversation history between sessions?**

A: Conversation history is maintained during your current session but resets when you start a new session or log out.

**Q: Can I use FlyMate for multiple pages simultaneously?**

A: FlyMate maintains context when switching between pages within the same session, allowing seamless work across multiple pages.

**Q: What happens if FlyMate doesn't understand my request?**

A: FlyMate will ask for clarification or suggest alternative ways to phrase your request. It may also provide related options that might match your intent.

**Q: Can FlyMate modify content in published pages?**

A: FlyMate works within the PageFly Editor environment. To modify published pages, you'll need to edit them in the PageFly Editor first.

**Q: How do I toggle FlyMate on/off?**

A: In the Editor, use the FlyMate tab button in the top toolbar. In the Dashboard, click the floating FlyMate icon in the bottom-right corner if the sidebar is not already open.

**Q: Is FlyMate available on all PageFly interfaces?**

A: Yes, FlyMate is available throughout PageFly, including the Editor and Dashboard, with consistent functionality across all interfaces.
