Vantaca Home: Create Custom Pages

Custom pages in Vantaca Home let you create unique, branded content for your associations and management company. You can build pages like About the Community, About the Board, Preferred Vendors, New Homeowner Resources, About the Management Company, etc. using HTML and AI tools.

Note: Custom pages support HTML content with inline CSS styling only. External stylesheets and scripts are restricted for security purposes.

 

Contents 

• Why Use Custom Pages
• Before You Begin
• Create a Custom Page at the Management Company Level
• Enable a Custom Page for an Association
• Build Page Content with AI
  • AI Instructions
  • Create Your Content Prompt
• Upload Images to System Files
  • Insert Image URLs into HTML
  • Alternative Method: Use AI to Insert Image URLs
• Add Call-to-Action Buttons
• Link to External Websites
• Link to Vantaca Home Pages
• View Your Custom Page
• Tips and Best Practices
   

Why Use Custom Pages

Custom pages work well for the following scenarios:

• About the Community: Describe the association's history, amenities, architectural style, and community features.
• About the Board: Introduce board members with photos, roles, and contact information.
• About the Management Company: Explain your company's services, values, and team to associations.
• New Homeowner Resources: Provide information about the area, local services, restaurants, and attractions.
• Preferred Vendors: Share vetted service providers for landscaping, roofing, plumbing, and other services with links to their websites.
• Custom Dashboards: Create welcome pages or navigation hubs with links to frequently accessed areas.



Before You Begin

Before creating custom pages:

• Gather your content including text, images, and any external links you want to include.
• Upload images to Settings > System Files to store them for use in your custom pages.
• Choose an AI tool for generating HTML content. Options can include Claude, ChatGPT, Gemini, etc. Vantaca uses Claude for software-related code generation.
• Determine the page visibility:
  • Everyone: Displays on public-facing pages and post-login for owners and board members.
  • Owner Only: Displays only in the owner menu after login.
  • Board Only: Displays only in the board menu after login.



Create a Custom Page at the Management Company Level

Create custom pages at the management company level to establish a foundation you can enable for specific associations.

To create a custom page:

1. Navigate to Settings > Portal Pages.

2. Click New Portal Page. 
   The Edit Portal Page screen opens. 
   
   

   

3. Provide the following information:
   • Page Title: Enter a descriptive title. Example: About.
   • Page Path: You can enter the same as the title.
   • Visibility: Select one of the following options: Everyone, Owner Only, or Board Only.
   • Menu Title: Enter the text to appear in the navigation menu. Example: About For example, If you create an About page at the management level, you can then enable it in an association and make changes to it so it's specific to that association.
   • Is Default: Leave blank if you want to enable the page selectively for associations. Select if you want all associations to have this page enabled automatically when you mark it live.
   • Is Live: Select to make the page available for use.
4. Click Update.

The page now appears in your Portal Pages list and is available to enable for individual associations.


 
 

Enable a Custom Page for an Association

After creating a custom page at the management company level, you can enable it for specific associations.

Example: We will enable and update the About page for the Barklay Estates association.

To enable a custom page for an association:

1. Navigate to Association > Association List.
2. Click Select next to the association to open the association details.
3. Navigate to Association > Portal Pages. 
   The Association Portal Pages screen displays currently enabled pages.

4. Click the UnUsed Portal Pages tab, and then Use next to your custom page. 
   Tip: If the list is long and you don't see your page, enter the page name in the Page Title search field to display your page. When you click Use, the page moves to the Association Portal Pages section and is now enabled for this association. 
    

   
   

5. (Optional) Click Edit next to your page to open the Edit Portal page and customize the Page Title and Menu Title for this specific association. 
   Example: We updated the page title and navigation menu option text for the Barklay Estates association.
   
   
    
6. Click Update. 
   Tip: At this point the page exists and you can view it by going to your Vantaca Home URL/public and adding ?c=[association code] to the end. 
   Where ?c={association code} is the association code. 
   Example for the Barklay association: vantaca.sandbox.net/public?c=BKET 
   
   
   

When you click the About Barklay Estates menu option it will display an empty page. We can now add content.



Back to Top

Build Page Content with AI

Use AI tools like Claude, ChatGPT, Gemini, etc. to generate HTML content for your custom pages.

 

AI Instructions

Configure your AI tool with the following instructions to ensure compatibility with Vantaca:

Note: Copy these instructions into your AI tool's systems instructions or include them at the beginning of your prompt.

Make sure to include the following HTML requirements:

• Use best-in-class HTML5 formatting
• Use only inline CSS for all styling (no external stylesheets)
• All HTML elements must be self-contained
• No external JavaScript or scripts
• Create responsive designs that work on mobile and desktop devices

Example:

Deeply analyze the design aspects and think through my design requests before building the HTML.
Use best in class HTML formatting.
Use only inline CSS for all styling (no <style> tags or external files).
Use only stimple HTML elements: <div>, <p>, <a>, <h2>, <h3>, <img>, <em>, <strong>.
Be fully self-contained with no dependencies on external scripts, fonts, or styles.
Use Flexbox inline styling (display:flex;flex-wrap:wrap;gap) to align CTAs or content blocks responsively.
Use accessible color contrast, readable font sizes, and web-safe fonts like 'Montserrat', sans-serif.
Output only the HTML block, ready to paste directly into a system that strips <head> or <body> tags.
Ensure spacing, padding, and button styles look visually appealing across desktop and mobile.
Do not use emoji-like icons. 

Create Your Content Prompt

Think about what you want your page to look like. An easy way to do this is to find other websites that you admire as examples of the tone and feel you want for your pages. You can include their URLs as part of the prompt. Structure your prompt to give the AI tool sufficient context:

• Define the outcome: Tell the AI what you want to create. Example: "I need you to build an HTML file for a single web page that I can put on my website."
• Provide design direction: Specify the style and aesthetic. Example: "I like the design of [website URL]. The style is modern with higher contrast but is not too busy on the page. It shows a clean and cozy design. Please use this design style with rounded edges to soften the design."
• Describe the content: Explain the page purpose and information to include. Example: "This will be an About Barclay Estates web page that describes a luxury association in Wilmington, North Carolina that was created in 2003. Include information about the community amenities, architectural style, and board governance."
• Request image placeholders: Ask the AI to include placeholders for images. Example: "Please add 4 images to this webpage. I will be using image links to populate those images. Please insert 'insert image here' wherever I need to put the images."

Example AI Prompt

I need you to build an HTML file for a single web page that I can put on my website.
I like the design of https://platocoffee.co.za. The style is modern with higher contrast but is not too busy on the page. 
It shows clean and cozy design. 
Please use this design style with rounded edges to soften the design.
This will be an About Barclay Estates web page that describes a luxury association in Wilmington, North Carolina that was created in 2003. 
[Include any specific details about amenities, governance, history, etc.]
Please add 4 images to this webpage. 
I will be using image links to populate those images. 
Please insert wording for "insert image here" wherever I need to put the link.

The AI tool will generate HTML code that you can copy and paste into Vantaca. Example using Claude:

 


 

Copy the HTML code to use in Vantaca.

You can also view the code to see what it produced (in the AI agent or an HTML editor). 

Example: The previous code provides a scrollable webpage that includes information about the Barklay Estates association.


 



You can continue to work with your AI agent to update the webpage until you have something you like or you can copy and paste the HTML code into Vantaca and make changes there.

 

Paste HTML and Edit Page Content

You can paste and edit custom page content directly in Vantaca without using HTML or edit the HTML itself.

To edit text content:

1. Navigate to Associations > Association List and click Select next to the association name.
2. Go to Association > Portal Pages.
3. Click Edit next to the custom page. 
   The Edit Portal Page screen opens. 
   
   
4. Open the Edit Body Content field and then click the View HTML icon () to open the HTML editor.
   
   
   
5. Paste your AI-generated HTML (copied earlier) into the editor.

6. Click Update. 
   Your HTML renders in the Edit Body Content page. For example: 
   
   
   
   You can now make changes in the Body Content section itself without touching the HTML using the standard editing tools in the menu. 

   Tip: To make significant HTML changes, copy the current HTML in the Edit Body Content section, paste it into your AI tool with your change/update instructions, and then paste the revised output HTML back into Vantaca.
    

Add Images to Custom Pages

Upload images that you want to use on the page into Vantaca System Files to reference them in the HTML of your custom page.



Upload Images to System Files

To upload images:

1. Navigate to System > System Files.
   
   
   
2. Right-click and select Upload or drag and drop your images into a folder. 
   We recommend that you add a Portal Images folder or similar to keep track of the portal images.
3. Repeat for all images you want to use. 
   Any time you need the URL of the uploaded image, right-click the image and select Copy Link to copy it to your clipboard to place in your HTML code. 
   
   
   

Insert Image URLs into HTML

To add images to your custom page you can use the following procedure or use AI to insert images for you (see the next section):

1. Navigate to Associations > Association List and click Select next to the association name.
2. Go to Association > Portal Pages.
3. Click Edit next to the custom page. The Edit Portal Page screen opens.
4. Open the Edit Body Content section and click the View HTML icon (). The View HTML editor opens.
5. Press Ctrl+F (or Cmd+F on Mac) to open the Find function and search for insert image here. 
   
   
   
   Note: If your code does not include image placeholders, you can easily add them where you like using the next steps, just insert the whole <img src="[image URL]" instead of replacing text.
6. Go to System > System Files and right-click the image you want to use.
7. Select Copy Link to copy the image URL to your clipboard to place in your HTML code.
8. In your HTML code replace insert image here with the image URL you copied from System Files. 
   Paste the URL between the quotation marks in the src="" attribute. 
   Example: Change <img src="insert image here"> 
   to
   <img src="https://yourdomain.vantaca.net/system-files/image.jpg"> 
   where the URL is of the image you want placed in your page.
9. Repeat for all image placeholders.
10. Click Update.



Alternative Method: Use AI to Insert Image URLs

If you have multiple images stored and their links, you can paste your HTML back into your AI tool and ask it to replace the "insert image here" text with the provided image URLs:

Example AI prompt:

I made I made updates. Please use this new HTML file going forward.
[Paste your HTML]
Replace "insert image here" with the following image URLs:
- First image: [URL]
- Second image: [URL]
- Third image: [URL]
- Fourth image: [URL]

The AI will update the HTML with your image URLs, and you can copy the updated code back into Vantaca.



Add Call-to-Action Buttons

Add buttons to your custom pages that link to external websites, other custom pages, or specific areas within Vantaca Home.



Back To Top

Link to External Websites

To create a button that links to an external site:

1. Copy your existing HTML from the Edit Body HTML editor.

2. Paste it into your AI tool and provide instructions:

   I made updates. Please use this new HTML file going forward.
   [Paste your HTML]      
   Update the button at the bottom to link to www.example.com
   Also create a new button in the same style that shows after the previous button
   that links to www.example2.com. 
   The text on the button should say "Second Example".

    

3. Copy the updated HTML and paste it back into Vantaca.
4. Click Update. 
   Your previous button will link to the first website and a second button is created that links to the second website.
    

Link to Vantaca Home Pages

You can create buttons that link to specific areas within Vantaca Home, such as:

• Other custom pages
• Document repositories
• Work order submission pages
• Specific dashboard sections

To link to internal Vantaca pages, provide the AI tool with the internal URL path or work with your Vantaca support team to identify the correct URL structure.

Example Uses:

• A banner at the top of the dashboard that redirects to a frequently accessed document
• A quick access button to submit work orders
• Navigation to association-specific resources



View Your Custom Page

After creating and enabling your custom page, view it in Vantaca Home.

To view your custom page:

1. Navigate to your association's Vantaca Home portal.
2. Look for the Menu title you specified in the left-navigation menu.
3. Click this menu option to view your custom page.

Tip: Use the URL structure [home.vantaca.net]/?c=[association code] to quickly navigate to specific associations during testing.
where [home.vantaca.net] is your association portal URL and [association code] is the specific code for the association.



Tips and Best Practices
 

Design Considerations:

• Keep designs clean and uncluttered for easy reading on mobile devices.
• Use high-contrast colors for accessibility.
• Include white space to prevent overwhelming users.
• Choose fonts that are easy to read at various sizes.
• Test your pages on both desktop and mobile devices.



Content Guidelines:

• Write concise, scannable content with clear headings.
• Use bulleted lists for multiple items or benefits.
• Include relevant images to break up text and add visual interest.
• Keep button text action-oriented. Example: Schedule a Tour or View Vendors.
• Update content regularly to keep information current.



Image Best Practices:

• Optimize images for web use to ensure fast loading times.
• Use consistent image dimensions for a polished look.
• Include descriptive alt text for accessibility (add in HTML).
• Store all images in System Files for easy management.



Version Control:

• Keep a copy of your HTML code in a separate document for reference.
• Document any major changes you make to custom pages.
• Test changes thoroughly before updating live pages.



AI Tool Tips:

• Provide specific design references when possible (websites, color schemes, layouts).
• Use conversational language when prompting AI tools.
• Request revisions if the first output isn't exactly what you need.
• Save effective prompts for future use with similar pages.
• Remember you can iterate with the AI by providing feedback and requesting adjustments.



Reusing Content:

• Create a template page at the management company level that you can customize for multiple associations.
• Copy HTML from one successful custom page to use as a starting point for another.
• Build a library of reusable sections (headers, footers, contact forms) to speed up page creation.

Back To Top