Setting Up Your Actionera Website
QUICK ACCESS GUIDE
The Web Setup page enables you to make chances to how the web version of your app will appear when viewed on a desktop or laptop.
You can access this screen under SETUP in the Content Portal:
Web Set Up Options and Fields
Image of the Web Setup Screen
Username and URL
- Username (15 char. limit, no spaces) - By default, every website linked to the Content Portal begins with web.actionera.com. The Username is the part of this web address that you get to personalize, often referred to as a "slug". Whatever you choose will appear at the end, after the forward slash.
- URL - The URL generated from your username will show up as a clickable link below the Username field
Ex. If your app is called, 'Best Practices'. So you choose the username 'bestpractices.' This will cause your web address to read like this: web.actionera.com/bestpractices
Pro-Tip: If you already own a custom domain name you prefer, you can use it instead of this URL. You will need to contact ACTIONERA support for directions on how to do this. Learn more HERE!
Image of Design Elements applied
Design Elements
When you launch a branded app, you are provided Graphic Design elements from our team. You can find the following items in a zip folder provided to you:
- Icon Image - This is the "favicon" that will appear in a browser tab
- Recommended size = 96x96 pixels for best results
- Logo - Your "web logo" is a horizontal image of your logo that looks best on websites.
- Recommended size = 256x96 pixels for best results
- Logo Text - If you DO NOT have a web logo, you can put text here
- Tagline - Many app owners will match this tagline to what appears on their"loading screen"
- Approx. 7-10 words describing what people will find in your app
Font Styling Preferences
- Headers - Default is set to Segoe UI. You can select a different font style here. You can only choose from what is available in the dropdown. You cannot import fonts of your choosing.
- Body - Default is set to Segoe UI. If you prefer, select a different font style here. You can only choose from what is available in the dropdown. You cannot import fonts of your choosing.
Website Color Scheme
When you launch a branded app, you are also provided 3 colors that were used in your abb build. These 6 digit, alpha-numeric values are called HEX Values and are used to define specific colors on your website. These will also be provided to you by our team in a zip folder so that you can reference them:
- Light Color - Default is #CCCCCC. You can select any color you like.
- Used behind body text in headers, footers and content areas. Black text must be readable on top of this color
- Medium Color - Default is #666666. You can select any color you like.
- Used as a background color for button and other accents. White text must be readable on top of this color.
- Dark Color - Default is #333333. You can select any color you like.
- Used for text/menu links and banner backgrounds. White text must be readable on top of this color.
Sample of a HEX Value
Pro-Tip: If you have a branded app in addition to the web version, we recommend using the same color scheme in your app, with your web. Both have a 3-part color scheme and matching them to look the same is going to create a more professional look
Head Tag and Body Tag
These fields are used to apply HTML code elements to your website. These are completely optional fields and not required to be used to have a successful, nice looking site. These are advanced skill level fields and you must have HTML coding knowledge to use them effectively
- Head Tag - The information placed in the head tag is not actually displayed on the page but is used by browsers and by search engines.
- Body Tag - If you are a custom code expert, this is where you can define the main content of your page, which displays on the browser. This area can contain text content, paragraphs, headings, images, tables, etc. But you must know HTML code to use this effectively
Samples of a Head Tag Customization - Chat Widget
Pro-Tip: If you are up to the challenge, head over to the Marketing Portal and go to "sites" then click "chat widget" to customize and auto-generate HTML code for a chat widget like this.