How to Create a Branded HTML Job Posting Using AI

Use ChatGPT to turn an existing job description into a polished HTML layout that matches your organization’s branding. This article includes a reusable prompt and steps for adding the result to your job posting.

Use your organization’s website in the prompt. ChatGPT will use it as a reference for your brand colours and tone.

Copy and Paste This Prompt

Click Copy entire prompt below to copy the full prompt at once. Then paste it into ChatGPT.

In ChatGPT, replace [INSERT WEBSITE URL] and [PASTE COMPLETE JOB DESCRIPTION HERE] with your details before sending.

Create a professional, branded HTML job posting using my organization’s website and the job description below.

Organization website: [INSERT WEBSITE URL]

Job description:
[PASTE COMPLETE JOB DESCRIPTION HERE]

Branding and design
• Review our website and use its brand colours and tone. If you cannot access it, ask me for our organization name and brand colours before proceeding.
• Create a clean, polished, mobile-friendly layout with a branded header, clear section headings, comfortable spacing, and a highlighted “How to Apply” section.
• Use legible fonts and accessible colour contrast.
• Include an application button only if an application email address or URL is provided. Also display the application instructions as readable text.
• Do not invent a logo or add images, emojis, or icons.

Content
• Preserve all job details, including salary, location, responsibilities, qualifications, benefits, and application instructions.
• You may improve grammar and readability without changing the meaning.
• Do not add qualifications, benefits, company claims, or employment policies that I have not supplied.
• Omit empty sections.

HTML requirements
• Use inline CSS only, with no JavaScript, external stylesheets, or external fonts.
• Wrap the entire posting in one <div>.
• Do not include <html>, <head>, or <body> tags.
• Use semantic headings, paragraphs, and lists so the posting remains readable if the editor removes styling.
• Make the layout fit narrow screens without horizontal scrolling.

Provide the complete, copyable HTML in one code block, ready to paste into the HTML or source editor of a job posting. After the code, list the HEX colours used and remind me to preview the posting and test its application links before publishing.

Before You Start

Have the following ready:

• Your organization’s website address
• Your complete job description, including the salary, location, qualifications, responsibilities, and benefits you want to display
• The application email address or application website, if applicable
• Access to ChatGPT and permission to create or edit the job posting

Step 1: Copy the Prompt into ChatGPT

1. Open ChatGPT and start a new conversation.
2. Click Copy entire prompt near the top of this article, then paste it into the conversation.
3. Replace [INSERT WEBSITE URL] with your organization’s website address.
4. Replace [PASTE COMPLETE JOB DESCRIPTION HERE] with your full job description.
5. Send the prompt. If ChatGPT cannot access your website, provide your organization name and brand colours when asked.

Step 2: Review the Generated Content

Check the result before adding it to Member365:

• Confirm that the job title, salary, location, schedule, qualifications, and benefits are correct.
• Make sure no job requirements, benefits, or company claims have been added without your approval.
• Check that the colours match your organization and the text is easy to read.
• Confirm that the application email address or website is correct.

If changes are needed, ask ChatGPT to revise the result and provide the complete updated HTML.

Step 3: Add the HTML to Your Job Posting

1. Copy the HTML from ChatGPT’s code block. Do not include the opening or closing backticks or the word “html” used to label the code block.
2. Create or open the job posting in Member365. For administrator instructions, see How to Create a Job Posting Through the Administrator Interface. For member instructions, see How to Add a Job Posting Through the Member Portal.
3. In the job description editor, open the HTML or source code view, if available.
4. Paste the generated HTML into the source view. If you are replacing an existing description, keep a copy of the original first.
5. Apply the source changes and return to the visual editor to review the layout.
6. Complete the other required posting fields. Make sure the posting’s application settings match the instructions in your description.

Cannot find an HTML or source option? Contact Member365 Support for guidance. Pasting HTML into the visual editor may display the code as text.

Step 4: Check the Posting Before Publishing

• Review all headings, lists, spacing, and colours.
• Check the layout on a narrow screen or mobile device.
• Test every application link or button. An email link opens an email application; it does not submit an application automatically.
• Check that the application instructions are also visible as readable text.
• Confirm the details in the description match the separate job posting fields.

Save the posting when your review is complete. Follow your organization’s normal approval process before making it available to applicants.

Troubleshooting

The HTML appears as text

Check that you pasted it into the HTML or source code view rather than the visual editor. Remove any copied code block markers.

Some colours or formatting are missing

Editors may remove or change some HTML styling. Ask ChatGPT for a simpler version using basic headings, paragraphs, lists, and inline CSS. Review the saved posting to confirm how it displays.

The colours do not match our branding

Give ChatGPT your approved HEX colour codes and ask it to provide the complete revised HTML using those colours.

The application button does not work

Check the destination email address or URL and the posting’s application settings. Ask ChatGPT to correct the link and provide the full updated HTML.