Generate landing pages with OpenAI and other LLMs

One of the most valuable characteristics of a compelling landing page is its ability to deliver the right message to the right audience. As the primary means of communicating your brand's purpose and value proposition to your visitors, it's essential that the content of your landing page is tailored to its audience and context.

OpenAI can be used to automate the generation of dynamic, personalized landing pages. This is achieved by creating structured JSON data, which acts as a blueprint for tailored content.

Large Language Models excel at NLP

OpenAI's ChatGPT can be utilized to generate creative and engaging content based on specific prompts. Given a particular input, or "prompt," the model generates a corresponding output, which can range from a few lines of text to a structured data format like JSON.

• Personalization
  By using OpenAI, we can create highly personalized landing pages that cater to specific audience segments, products, or campaigns.
• Scalability
  This method is highly scalable, enabling the generation of a large number of unique landing pages with minimal manual effort.
• Efficiency
  By automating the landing page creation process, we save valuable time and resources that would otherwise be spent on manual page design and coding.
• Consistency
  Using a JSON-based structure ensures that all landing pages maintain a consistent structure and style, while still allowing for a high degree of customization in terms of content.
• Versatility
  The structured data format provided by JSON allows us to easily modify, extend, or repurpose our landing page content as needed.
• SEO
  The static page generated by dynamic page generation is easily picked up by search engines thus boosting the SEO.

Building Landing Pages using ChatGPT

When it comes to creating landing pages, this can be incredibly useful. For example, let's say we want to create a unique landing page for a new product launch. We could provide OpenAI with a prompt that includes some basic details about the product (like its name, key features, and target audience). The model could then generate a JSON object that includes all of the critical components of our landing page, including a main headline, subheadings, key selling points, a call to action, and more.

Let's see how this would work when launching a new product.

Base Setup

Let's assume we have a simple landing page that we've built for all our product launches. It takes all the product information in JSON and creates a frontend page for that product corresponding to the information provided.

A sample product's JSON would look like this:

{
  "header": {
    "title": "Introducing the new GlassPods",
    "cta": "Buy Now"
  },
  "intro": {
    "headline": "Introducing our most exciting product yet!",
    "body": "Our new product is designed to he...."
  },
  "features": {
    "headline": "Key Features",
    "items": [
      {
        "title": "Feature 1",
        "description": "Short Description"
      },
      {
        "title": "Feature 2",
        "description": "Short Description"
      }
    ]
  }
}

Using ChatGPT to generate the JSON

OpenAI's ChatGPT excels at understanding natural language and generating output in a variety of formats including JSON. We can combine product information in natural language with the above JSON as a blueprint to automatically generate the output as needed.

Let's try it out!

Here's the prompt we went with:

We are a technology company like Apple that believes in good & efficient design. We are launching our new keyboard called "MyKeys Pro". It has the following features:

- Mechanical Keyboard
- Cherry MX Keys
- Black with RGB Lights

Generate a JSON for a landing page in the following format:

{
  "header": {
    "title": "Introducing the new GlassPods",
    "cta": "Buy Now"
  },
  "intro": {
    "headline": "Introducing our most exciting product yet!",
    "body": "Our new product is designed to he...."
  },
  "features": {
    "headline": "Key Features",
    "items": [
      {
        "title": "Feature 1",
        "description": "Short Description"
      },
      {
        "title": "Feature 2",
        "description": "Short Description"
      }
    ]
  }
}

ChatGPT responds with the exact JSON that we need to generate the landing page!

{
  "header": {
    "title": "Introducing the new MyKeys Pro",
    "cta": "Buy Now"
  },
  "intro": {
    "headline": "Experience Typing Like Never Before",
    "body": "MyKeys Pro is not just another keyboard. It's a statement of precision, design, and functionality. Dive deep into a typing experience that's both tactile and mesmerizing, all while elevating your desk's aesthetics."
  },
  "features": {
    "headline": "Key Features",
    "items": [
      {
        "title": "Mechanical Design",
        "description": "Experience satisfying keystrokes with high-quality mechanical switches."
      },
      {
        "title": "Cherry MX Keys",
        "description": "Renowned for their durability and tactile feedback, Cherry MX keys offer a premium typing experience."
      },
      {
        "title": "Sleek Black with RGB Lights",
        "description": "Enhance your setup's aesthetics with a sleek black finish, accented by vibrant RGB lighting."
      }
    ]
  }
}

Once the JSON is generated, we use a dynamic page generation strategy to create the actual landing page. This strategy interprets the JSON object and builds a complete web page based on its structure and content. The process is highly efficient and allows for the creation of custom landing pages on-the-fly.

Going Further with Canonic

With Canonic, you can go further and make it extremely easy for your team to add new products. You can build a simple UI wrapping all of this functionality making it as simple as entering a basic prompt to generate the landing page.

In the above setup, let's say our frontend build system also accepts all product JSON through an API endpoint and can run through a GitHub Action. We can use Canonic to build a simple tool that takes product description as input and then passes that along with the template to generate the JSON. This JSON is then stored in a Canonic table that can then be accessed by the build system through the API. Using Canonic, we can also trigger the Github Action to redeploy the website whenever a new landing page is generated.

How Canonic leverages OpenAI

At Canonic, we use a blend of OpenAI and innovative web technologies to create dynamic, personalized landing pages. By generating structured JSON data with OpenAI, we design a content blueprint that is both data-driven and interactive. This approach allows for flexibility and personalization in landing page creation, catering to a wide array of user preferences and experiences.

One of the technologies we use to bring these dynamic landing pages to life is GatsbyJS. GatsbyJS is a powerful, modern framework for building websites and web applications. One of its key features is the ability to generate static HTML content from a variety of data sources at build time, creating highly performant, SEO-friendly web pages.

GatsbyJS uses a GraphQL layer to pull in data from different sources, such as markdown files, APIs, or even JSON files. In our case, we feed the JSON data, generated by OpenAI prompts, into this GraphQL layer. This data is then utilized in our Gatsby templates to construct unique landing pages.

To illustrate the process, here's a simplified workflow:

1. Generating JSON: We use OpenAI prompts to generate structured JSON data for each landing page. The generated JSON data contains all necessary information for a page, such as title, header, content, etc.
2. Feeding JSON to GatsbyJS: The generated JSON data is fed into GatsbyJS' GraphQL layer. This step could involve placing the JSON files into a specific directory that GatsbyJS pulls data from or setting up a process where the JSON data is directly fed into the GraphQL layer.
3. Creating Dynamic Pages: GatsbyJS then creates a dynamic page based on the data provided. This is done in the gatsby-node.js file where we define a createPages function that uses the createPage action provided by GatsbyJS

const fs = require("fs").promises

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // Query for the JSON data
  const result = await graphql(`
    query {
      allJsonData {
        edges {
          node {
            id
            path
            // other required fields
          }
        }
      }
    }
  `);

  // For each JSON node, create a page
  await fs.readdir(dirname).then(filenames =>
    Promise.all(
      filenames.map(filename =>
        fs.readFile(`${dirname}/${filename}`, "utf-8").then(content => {
          const path = `/content/${filename.replace(".json", "")}`
          return actions.createPage({
            path,
            context: { path, slug: path, content: JSON.parse(content) },
            component: require.resolve(
              `./src/templates/page.js`
            ),
          })
        })
      )
    )
  );
 
};

In the createPages function, we query for the JSON data and then create a page for each JSON node using the createPage action.

This mixture of OpenAI with GatsbyJS allows Canonic to generate highly customized, dynamic landing pages, offering us the flexibility to continuously adapt our content to suit the evolving needs of our users. Moreover, through our OpenAI integration, we provide other developers the capability to leverage this approach, thereby simplifying the process of creating dynamic landing pages.

Conclusion

Combining Canonic with Large Language Models can unlock new capabilities and more importantly speed up teams, reducing time spent on mundane tasks and shifting focus to the core business. Canonic allows you to build powerful automation, workflows, and tools regardless of technical experience.

Get started