Skip to main content

PDF Customization

Introduction​

Welcome to the PDF customization page for Mimeeq Embed! In this section, we'll explore how you can tailor the appearance and content of your PDF documents generated through Mimeeq Embed to align with your branding and presentation needs.

Purpose of PDF Customization​

PDF documents are an integral part of many businesses' workflows, serving as a means to present product configurations, specifications, and pricing to clients and stakeholders. Customizing PDFs allows you to maintain brand consistency, professionalism, and convey information effectively to your audience.

Importance of Customization​

Customizing PDF documents goes beyond simply adding a logo or changing colors. It enables you to create a unique and tailored experience for your customers, enhancing brand recognition and trust. Whether you're a small business or a large enterprise, presenting polished and branded PDF documents can leave a lasting impression on your clients.

Leveraging Mimeeq's API​

Mimeeq's API provides developers with powerful tools to customize various aspects of the PDF generation process. By utilizing the MimeeqApiConfig interface, you can control the logo, header, footer, page layout, and even inject custom HTML content into your PDF documents. This flexibility empowers you to create PDFs that align seamlessly with your brand identity and communication style.

Getting Started​

To begin customizing your PDF documents, familiarize yourself with the properties available in the MimeeqApiConfig interface. Experiment with different configurations and observe how they impact the appearance and layout of your PDFs. Don't hesitate to refer to the examples provided in this documentation for inspiration and guidance.

Next Steps​

In the following sections, we'll dive deeper into specific customization options, such as logo positioning, header and footer customization, and advanced customization techniques. By the end of this guide, you'll have the knowledge and tools to create professional and branded PDF documents tailored to your business needs.

Let's start exploring the various customization options available to you!

Logos are an essential component of branding, and with Mimeeq's PDF customization options, you can easily customize the appearance and position of your logo in the generated PDF documents. This section outlines how to customize the logo using MimeeqApiConfig.

Introduction​

In Mimeeq, the logo customization feature allows you to personalize your PDF documents with your brand's logo. You can adjust the position of the logo and even replace it with a custom logo of your choice. Let's explore some common logo customization scenarios.

Changing Logo Position​

To change the position of the logo in your PDF document, you can utilize the logoPosition property in the ApiPdfConfig interface. The logoPosition property accepts values such as 'LEFT', 'RIGHT', or 'MIDDLE', determining the alignment of the logo within the header section of the PDF.

window.mimeeqAppConfig = {
  pdf: {
    logoPosition: 'MIDDLE',
    // Other PDF customization properties...
  },
};

// or

document.addEventListener('mimeeq-app-loaded', () => {
  window.mimeeqApp.config = {
    pdf: {
      logoPosition: 'MIDDLE',
      // Other PDF customization properties...
    },
  };
});

Sometimes you may want to use custom logo for PDF instead of the one specified at your mimeeq account, you can specify the URL of your custom logo using the logo property in the ApiPdfConfig interface.

Simply provide the URL of the image file representing your custom logo.

The custom logo can be any rasterized graphic file (e.g., PNG, JPG) hosted on a server accessible by the PDF generator.

document.addEventListener('mimeeq-app-loaded', () => {
  window.mimeeqApp.config = {
    pdf: {
      logo: `https://d1bd8jihtqzqs4.cloudfront.net/dev_docs/tree-304181_640.png`, // URL of the custom logo image
      // Other PDF customization properties...
    },
  };
});

Header Text Behavior​

In addition to logo customization, it's important to understand how the text in the header behaves in Mimeeq-generated PDFs. By default, the header text contains the tab name and is aligned to the middle. The alignment of the header text may change based on the position of the logo:

  • If the logo is positioned at the left, the tab name appears aligned to the right.
  • If the logo is positioned in the middle or at the right (default), the tab name appears aligned to the left side.

These behaviors ensure a cohesive layout in the header section of the PDF documents. Feel free to experiment with different logo positions and observe how it affects the alignment of the header text.

Customize Content​

In addition to logo and layout customization, Mimeeq's PDF customization options allow you to inject custom content into your PDF documents. This enables you to add supplementary information, instructions, or branding elements to enhance the overall presentation.

Introduction​

Customizing content in your PDF documents provides you with the flexibility to include additional information tailored to your audience's needs. Whether you want to add a disclaimer, include a personalized message, or insert branding elements, Mimeeq's API makes it easy to integrate custom content seamlessly into your PDF documents.

Adding Custom Text​

You can include custom text blocks at various positions within your PDF document, such as before or after the product configuration, at the end of the document, or anywhere else you see fit. Simply utilize the getFooter and getHeader methods in the ApiPdfConfig interface to generate HTML content for the footer and header sections, respectively.

// Example MimeeqApiConfig with custom footer text
const pdfConfig = {
  getFooter: () => {
    return '<div style="text-align: center; font-size: 12px;">Copyright © 2024 My Company. All rights reserved.</div>';
  },
  // Other PDF customization properties...
};
document.addEventListener('mimeeq-app-loaded', () => {
  window.mimeeqApp.config = {
    pdf: {
      getFooter: (tabData) => {
        return `
            <footer style="width:100%;font-size:13px;color:var(--mmq-typography-hint, rgba(46, 51, 65, .5));white-space:nowrap;margin:0 30px 5px 30px;display:grid;align-items:center;justify-content:space-between;grid-template-columns: max-content 1fr max-content; gap: 30px;">
    <style>
      * {
        font-family: Arial;
      }
    </style>
    <div style="white-space:nowrap;text-align:left;font-size:11px">https://mimeeq.com</div>
    <div></div>
    <div class="number" style="white-space:nowrap;text-align:right;font-size:11px;display: flex; gap: 16px;">
      <span>
        Generated: UTC ${new Date().toLocaleString([], {
          month: 'numeric',
          day: 'numeric',
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
        })}
      </span>
      Page <span class="pageNumber"></span> of <span class="totalPages"></span>
    </div>
  </footer>
          `;
      },
    },
  };
});

Injecting HTML Content​

For more complex customization needs, you can inject HTML content directly into your PDF documents. Use the getPdfContent method in the ApiPdfConfig interface to generate HTML content for the entire PDF document. This method gives you full control over the content and layout of your PDF, allowing for rich customization possibilities.

// Example MimeeqApiConfig with custom HTML content
const pdfConfig = {
  getPdfContent: (tabs, pageSettings) => {
    let htmlContent = '<div>';
    // Iterate over tabs and generate HTML content
    tabs.forEach((tab) => {
      htmlContent += `<h1>${tab.tabName}</h1>`;
      htmlContent += `<p>${tab.productName}</p>`;
      // Add more custom HTML content as needed
    });
    htmlContent += '</div>';
    return htmlContent;
  },
  // Other PDF customization properties...
};

When customizing the header and footer in your PDF documents, you can use placeholders to dynamically insert values such as the current date, document title, and page numbers. Puppeteer provides the following placeholders that can be used as CSS classes in your HTML header and footer templates:

  • .date: Inserts the formatted print date.
  • .title: Inserts the document title.
  • .url: Inserts the document location (URL).
  • .pageNumber: Inserts the current page number.
  • .totalPages: Inserts the total number of pages in the document.

Here's an example of how to use these placeholders in your HTML footer template:

<!-- Example HTML footer template with placeholders -->
<div
  class="footer">
  <span
    class="date"></span>
  |
  <span
    class="title"></span>
  |
  Page
  <span
    class="pageNumber"></span>
  of
  <span
    class="totalPages"></span>
</div>

By using these placeholders in your HTML header and footer templates, Puppeteer will automatically replace them with the corresponding values when generating the PDF document.

warning

Font Limitations Disclaimer

Please note that custom fonts are not supported in the footer due to limitations of the PDF generator. The footer and page content use separate font loading mechanisms, which can lead to inconsistencies in the PDF layout. As a workaround, it's recommended to use standard system fonts for the footer to ensure consistent rendering across different PDF viewers.

You can also try to place your footer as part of the content. In this case remember to position it manually at the end of each page.

Controlling Pagination with CSS Page Breaks​

You can control pagination in your PDF documents using CSS rules for page breaks. The page-break-before and page-break-after properties allow you to specify where page breaks should occur.

Here's an example demonstrating how to ensure each content block starts on a new page by utilizing the page-break-before: always property:

// Example MimeeqApiConfig with custom HTML content
const pdfConfig = {
  getPdfContent: (tabs, pageSettings) => {
    let htmlContent = '<div>';
    // Iterate over tabs and generate HTML content
    tabs.forEach((tab) => {
      htmlContent += `<h1>${tab.tabName}</h1>`;
      htmlContent += `<p>${tab.productName}</p>`;
      // Add page break before each content block except for the first one
      if (tab !== tabs[0]) {
        htmlContent += '<div class="content-block" style="page-break-before: always;"></div>';
      }
    });
    htmlContent += '</div>';
    return htmlContent;
  },
  // Other PDF customization properties...
};

In this example, each .content-block element starts on a new page, ensuring clear separation of content.

For more information about CSS page breaks, you can refer to the MDN Web Docs.

Experiment with different placeholders and CSS styles to customize the header and footer according to your requirements.

Adding a Disclaimer under the Options​

When customizing your PDF documents, you may want to include disclaimers or additional information below the product options. This can be useful for providing important notes or clarifications to your customers. Mimeeq's API allows you to easily add such disclaimers using the afterOptionsContent property in the ApiPdfConfig interface.

Introduction​

Adding a disclaimer under the options section allows you to communicate important information to your customers, such as material specifications, usage instructions, or legal notices. You can customize the disclaimer content and styling to match your branding and messaging.

Example: Adding a Disclaimer​

document.addEventListener('mimeeq-app-loaded', () => {
  window.mimeeqApp.config = {
    pdf: {
      afterOptionsContent: `<div
              style='margin-top: 40px; font-size: 12px; line-height: 20px; color: #2E3341;'>
              Please note that the materials shown in the images are computer generated; the real materials may appear different in reality; please use the images as a guide and ask for a physical sample from your local distributor
            </div>`,
    },
  };
});

In this example, we utilize the afterOptionsContent property to insert a disclaimer below the product options. The disclaimer text is styled with custom CSS to ensure readability and alignment with your PDF layout.

Customizing the Header​

Customizing the header in your PDF documents allows you to brand your documents and provide essential information such as the product name and company logo. Mimeeq's API provides the flexibility to create custom headers tailored to your specific requirements using the getHeader method in the ApiPdfConfig interface.

Introduction​

Customizing the header section enables you to enhance the visual appeal of your PDF documents and reinforce your brand identity. You can include elements such as the product name, company logo, and additional branding elements to create a professional and cohesive look.

Example: Custom header​

document.addEventListener('mimeeq-app-loaded', () => {
  window.mimeeqApp.config = {
    pdf: {
      getHeader: (tabData) => {
        return `
            <header style='display: grid; align-items: center; align-content: center;grid-template-columns: 1fr 150px;padding-bottom: 15px; margin-bottom: 40px; border-bottom: 1px solid var(--mmq-border-dark, #ededee);'>
            <div style='font-size: 24px; line-height: 28px; font-weight: 500; text-align: center; position: relative; left: 75px;'>
            ${tabData.tabName}
            </div>


            <img style='object-fit: contain; height: 60px; width: auto; max-width: 150px;' src="${tabData.customerLogo}" />
            </header>
          `;
      },
    },
  };
});

In this example, we define a custom header using the getHeader method. The header includes the product name and company logo, styled according to your branding guidelines. You can customize the header content and layout to suit your specific requirements and design preferences.

Customizing Page Layout​

Customizing the page layout in your PDF documents allows you to control aspects such as margins, paper size, and orientation, ensuring your documents meet your specific requirements. Mimeeq's API provides various options for adjusting the page layout to achieve the desired appearance and formatting.

Introduction​

Customizing the page layout is essential for creating visually appealing and well-formatted PDF documents. By adjusting parameters such as margins, paper size, and orientation, you can optimize the layout for readability and aesthetics. Mimeeq's API offers flexibility in customizing these aspects to suit your needs.

Example: Adjusting Margins​

You can adjust the margins of your PDF document to control the spacing between the content and the edges of the page. Use the margin property in the PageSettings interface to specify the margin values in CSS units (e.g., pixels, inches).

// Example MimeeqApiConfig with custom margin settings
const pdfConfig = {
  pageSettings: {
    margin: {
      top: '1in',
      bottom: '1in',
      left: '0.5in',
      right: '0.5in',
    },
  },
  // Other PDF customization properties...
};

In this example, we set custom margin values for the top, bottom, left, and right sides of the page, ensuring consistent spacing throughout the document.

Example: Setting Paper Size and Orientation​

You can specify the paper size and orientation of your PDF document to match your printing requirements. Use the format and landscape properties in the PageSettings interface to configure the paper size and orientation.

// Example MimeeqApiConfig with custom paper size and orientation settings
const pdfConfig = {
  pageSettings: {
    format: 'A4',
    landscape: false,
  },
  // Other PDF customization properties...
};

In this example, we set the paper size to A4 and configure the document to be in portrait orientation. You can adjust these settings to meet your specific printing needs.

Example: Hiding Default Background​

You may choose to hide the default white background of your PDF document to create transparent or semi-transparent PDFs. Use the omitBackground property in the PageSettings interface to hide the background.

// Example MimeeqApiConfig with background omission
const pdfConfig = {
  pageSettings: {
    omitBackground: true,
  },
  // Other PDF customization properties...
};

In this example, we enable the omitBackground option to hide the default background, allowing for transparent PDFs with no background color.

Experiment with different combinations of page layout settings to achieve the desired appearance and formatting for your PDF documents.

Advanced Customization​

Advanced customization options allow you to exert fine-grained control over the layout, content, and appearance of your PDF documents. Mimeeq's API provides advanced features that enable you to create highly tailored PDFs to meet your specific requirements.

Custom Generators for Different Page Types​

Mimeeq's API allows you to define custom generators for different types of pages within your PDF documents. By specifying custom rendering logic for each page type, you can implement complex layouts and incorporate dynamic content seamlessly.

// Example MimeeqApiConfig with custom page renderers
const pdfConfig = {
  pageRenderers: {
    configuration: (tabData, index, pageSettings) => {
      // Custom rendering logic for configuration pages
      return `<div>Custom configuration page content for ${tabData.tabName}</div>`;
    },
    gallery: (tabData, index, pageSettings) => {
      // Custom rendering logic for gallery pages
      return `<div>Custom gallery page content for ${tabData.tabName}</div>`;
    },
    // Define custom renderers for other page types...
  },
  // Other PDF customization properties...
};

In this example, we define custom rendering logic for configuration and gallery pages using the pageRenderers property. You can implement custom rendering logic for additional page types as needed.

Generating Custom HTML Content for the Entire PDF Document​

For maximum flexibility, Mimeeq's API allows you to generate custom HTML content for the entire PDF document. By providing a custom generator function, you can construct the entire document structure and layout programmatically, incorporating dynamic data and styling as required.

// Example MimeeqApiConfig with custom PDF content generator
const pdfConfig = {
  getPdfContent: (tabs, pageSettings) => {
    // Custom HTML content generation logic for the entire PDF document
    let htmlContent = '<div>';
    tabs.forEach((tab) => {
      htmlContent += `<h1>${tab.tabName}</h1>`;
      if (tab.description) {
        htmlContent += `<p>${tab.description}</p>`;
      }
    });
    htmlContent += '</div>';
    return htmlContent;
  },
  // Other PDF customization properties...
};

In this example, we define a custom generator function for the entire PDF document using the getPdfContent property. The function dynamically generates HTML content based on the provided tab data, allowing for complete control over the document's structure and layout.

Experiment with advanced customization options to create highly tailored PDF documents that meet your unique requirements and specifications.