# International

### 1. Invoice

{% tabs %}
{% tab title="View" %}

<figure><img src="/files/5X0G7o9zXUzwGpVqAUxq" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Template code" %}
**Template type:** Orders

```
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Invoice</title>
</head>
<body>

<div class="container">

  <table class="width100">
    <tbody>
    <tr>
      <td class="logo-wrapper" valign="top">
          <img src="https://blog.keycrm.app/keycrm/images/keycrm-logo-blue-on-white.png" style="width: 220px;" alt="">
      </td>
      <td valign="top">
        <span style="background-color: yellow">Kyiv, Honchara St., 52</span><br />
        <span style="background-color: yellow">googrider@ukr.net</span><br />
      </td>
      <td valign="top">
        <span style="background-color: yellow">тел.: (044)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (095)777-77-77</span><br />
        <span style="background-color: yellow">тел.: (067)777-77-77</span><br />
      </td>
    </tr>
    </tbody>
  </table>
  
  <br /><br /><br />

  <table class="width100">
    <tbody>
    <tr>
      <td valign="top" class="label" style="width:50%">
          <span style="background-color: yellow">Supplier: FAA unique presents</span><br />
          <span style="background-color: yellow">Private Entrepreneur Neomenko A.F.</span><br />
          <span style="background-color: yellow">Kyiv, Honchara St., 52</span><br />
          <span style="background-color: yellow">тел.: (044)777-77-77</span><br />
      </td>
      <td valign="top" class="label">
          Recipient: {{ model.client_name }}<br />
          tel.: {{ model.client_phone }}<br />
          {% if model.client_email %}
            email: {{ model.client_email }}
          {% endif %}
      </td>
    </tr>
    </tbody>
  </table>
  <br />

  <p class="big-text text-center" style="margin-bottom: 10px">
    {% set mnths = ['','January','February','March','April','May','June','July','August','September','October','November','December'] %}
    
    Invoice №{{ model.id }} dated {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }}
  </p>

  <table class="width100 border">
    <thead class="table-products">
      <tr>
        <th class="text-center">№</th>
        <th>Product Code</th>
        <th class="name-col">Product Name</th>
        <th>Unit</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total</th>
      </tr>
      
      {% for key, product in model.products %}
      <tr>
        <td class="text-center">{{key + 1}}</td>
        <td class="text-center">{{ product.product_sku }}</td>
        <td style="width:50%">{{ product.product_name }}</td>
        <td class="text-center">{{ product.product_unit_type }}</td>
        <td class="text-center">{{ product.product_quantity }}</td>
        <td class="text-center">{{ product.price_sold|format_currency('USD', locale='en') }}</td>
        <td class="text-right">{{ (product.product_quantity * product.price_sold)|format_currency('USD', locale='en') }}</td>
      </tr>
      {% endfor %}
    </thead>
    <tbody>
        {% if model.discount_amount or model.shipping_price  %}
        <tr>
          <td colspan="6" class="text-right">Total for products:</td>
          <td class="text-right">{{ model.total_price|format_currency('USD', locale='en') }}</td>
        </tr>
        {% endif %}

        {% if model.discount_amount %}
        <tr>
          <td colspan="6" class="text-right">Discount:</td>
          <td class="text-right">{{ model.discount_amount|format_currency('USD', locale='en') }}</td>
        </tr>
        {% endif %}

        {% if model.shipping_price %}
        <tr>
          <td colspan="6" class="text-right">Shipping:</td>
          <td class="text-right">{{ model.shipping_price|format_currency('USD', locale='en') }}</td>
        </tr>
        {% endif %}

        <tr>
          <td colspan="6" class="text-right">Total:</td>
          <td class="text-right">{{ model.grand_total|format_currency('USD', locale='en') }}</td>
        </tr>
   </tbody>
  </table>
  
  <br /><br />
  <table class="table-sum width100">
    <tr>
      <td colspan="2">
          Total items {{ model.products|length }}, for the amount of {{ model.grand_total|format_currency('USD', locale='en') }}
      </td>
      <td></td>
    </tr>
    <tr>
      <td>Date: <span class="label underline">{{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }}</span>    </td>
      <td>Supplier's signature: &nbsp;&nbsp;&nbsp; ____________________</td>
      <td></td>
    </tr>
  </table>
</div>

</body>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
  }
  body {
    font-size: 16px;
    line-height: 1.3;
    min-width: 320px;
    font-family: sans-serif;
    overflow-x: hidden;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  .label {
    font-weight: bold;
  }
  
  .underline {
      text-decoration: underline;
      font-style: italic;
  }

  .big-text {
    font-size: 18px;
  }
  
  .width100 {
      width: 99%;
  }

  table {
    border-collapse:collapse;
    border-spacing:0;
    height: auto;
  }

  table td {
    padding: 5px;
  }

  table th {
    background: #d4d4d4;
  }

  table thead td,
  table thead th {
    border: 1px solid black;
  }
  
  table.table-products {
      border: solid 2px black;
  }

  table.table-products th {
    padding: 20px 5px;
  }
  table.table-products td {
    padding: 5px;
  }
  
  table.table-sum {
      margin-top: 7px;
  }
  
  table.table-sum td {
    padding: 3px 5px 3px 15px;
  }

</style>
</html>

```

{% endtab %}
{% endtabs %}

### 2. Etsy-like Invoice

{% tabs %}
{% tab title="View" %}
![](/files/QINuUObrn4cFUkvjO7Iy)
{% endtab %}

{% tab title="Template code" %}
**Template type:** Orders

```
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>

<div class="container">
    
    <div style="font-size: 24px; margin-bottom: 10px;">
        <strong style="background-color: yellow">ShopName</strong>
    </div>
    
    <div style="margin-bottom: 40px;">
        <span style="background-color: yellow">https://etsy.com/shop/YOURSHOP</span>
    </div>

    <table class="content">
        <tbody>
        <tr>
            <td valign="top" style="width: 26%; padding-right: 20px;">

                <h3 class="label">Ship to</h3>
                <p>{{ model.recipient_full_name }}</p>
                <p>
                    {{ model.shipping_receive_point }}
                    {{ model.shipping_address_city }},
                    {{ model.shipping_address_region }}
                    {{ model.shipping_address_zip }}
                </p>
                <p>{{ model.shipping_address_country }}</p>

                <h3 class="label" style="margin-top: 20px;">Scheduled to ship by</h3>
                <p>{{ model.shipping_date_actual|date("M d, Y") }}</p>
                
                <div style="height: 1px; background: black; margin-top: 20px;"></div>
                
                <h3 class="label" style="margin-top: 20px;">Ship from</h3>
                <p><span style="background-color: yellow">Full name</span></p>
                <p>
                    <span style="background-color: yellow">Khreschatyk 26/104</span>
                    <span style="background-color: yellow">Kyiv</span>
                    <span style="background-color: yellow">Kyiv region</span>
                    <span style="background-color: yellow">79001</span>
                </p>
                <p><span style="background-color: yellow">Ukraine</span></p>

                <h3 class="label" style="margin-top: 20px;">Order</h3>
                <p>{{ model.source_uuid }}</p>

                <h3 class="label" style="margin-top: 20px;">Order date</h3>
                <p>{{ model.created_at|date("M d, Y") }}</p>

                <h3 class="label" style="margin-top: 20px;">Buyer</h3>
                <p>{{ model.client_name }}</p>

                <h3 class="label" style="margin-top: 20px;">Payment method</h3>
                <p><span style="background-color: yellow">Paid via PayPal</span></p>

            </td>
            
            <td  valign="top" width="74%">
                <h3 class="label">
                    {{ model.products|reduce((carry, item) => carry + item.product_quantity, 0) }} items
                </h3>
                <table class="products">
                    <tbody>
                    {% for product in model.products %}
                        <tr>
                            <td>
                                <img src="{{ product.product_image }}" width="70" style="border: 0; background: lightgrey; min-height: 70px;" />
                            </td>
                            <td style="padding-right: 25px; padding-left: 25px;">
                                <span class="label">{{ product.product_name }}</span>

                                <p>{{ product.product_properties|nl2br }}</p>
                            </td>
                            <td style="white-space: nowrap;">
                                {{ product.product_quantity }} x {{ product.price_sold|format_currency(currency, locale='en') }}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

                <div class="total-order">

                    <table>
                        <tr>
                            <td>Item total</td>
                            <td width="160">{{ model.total_price|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td>Shop discount</td>
                            <td>- {{ model.discount_amount|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td>Shipping total</td>
                            <td>{{ model.shipping_price|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td>Subtotal</td>
                            <td>{{ (model.total_price - model.discount_amount + model.shipping_price)|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td>Tax</td>
                            <td>{{ model.taxes|format_currency(currency, locale='en') }}</td>
                        </tr>
                        <tr>
                            <td class="label">Order total</td>
                            <td class="label">{{ model.grand_total|format_currency(currency, locale='en') }}</td>
                        </tr>
                    </table>

                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        height: 100%;
    }

    body {
        color: #333;
        font-size: 16px;
        line-height: 1.3;
        min-width: 320px;
        font-family: Arial, sans-serif;
        overflow-x: hidden;
    }

    .label {
        font-size: 16px;
        font-weight: 700;
    }
    
    .products {
        width: 100%;
        margin: 12px 0;
        border-collapse: collapse;
    }
    
    .products tr {
        border: solid 1px black;
        border-width: 1px 0;
    }
    
    .products tr td {
        line-height: 150%;
        padding: 15px 0;
        vertical-align: top;
    }
    
    .products .label {
        display: block;
        padding-bottom: 8px;
    }

    .total-order table {
        width: 100%;
        margin-bottom: 30px;
        text-align: right;
    }

    .total-order table td {
        padding: 5px;
    }

</style>
</html>
```

{% endtab %}
{% endtabs %}

### 3. Proforma Invoice (for customs)

{% tabs %}
{% tab title="View" %}

<figure><img src="/files/ah2HQRZdRfznEZqXzLNg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Template code" %}
**Template type:** Orders

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">

    {% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня',
    'серпня','вересня','жовтня','листопада','грудня'] %}

    <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
        <p style="font-size: 20px"><strong>Proforma Invoice / Рахунок проформа</strong></p>
    </div>
    <div style="display: flex;justify-content: space-between;flex-direction: row;">
        <div style="display: flex; justify-content: center; flex-direction: column; align-items: flex-start;">
            </br>
            <p>Sender / Відправник:</p>
            <p style="background-color: yellow">NAME NAME</p>
            <p style="background-color: yellow">test@ukr.net</p>
            <p style="background-color: yellow">Kyivska 1</p>
            <p style="background-color: yellow">Brovary 07401</p>
            <p style="background-color: yellow">Ukraine</p>
            <p style="background-color: yellow">+38(011)-111-11-11</p>
        </div>
        <div style="display: flex; justify-content: center; flex-direction: column; align-items: flex-start;">
            </br>
            <p>Consignee / Отримувач:</p>
            <p>{{ model.client_name }}</p>
            <p>{{ model.client_email }}</p>
            <p>{{ model.shipping_address_region }}</p>
            <p>{{ model.shipping_receive_point }}</p>
            <p>{{ model.shipping_address_country }}</p>
            <p>{{ model.client_phone }}</p>
        </div>
    </div>
    </br>
    <table class="table-products width100 border">
        <tbody>
        <tr>
            <td colspan="3"><p style="font-size: 18px"><strong>Proforma Invoice № {{ model.id }}</strong></p></td>
            <td colspan="3"><p style="font-size: 18px" class="text-right"><strong>Date: {{
                        model.created_at|date("d/m/Y") }}</strong></p></td>
        </tr>
        </br>
        <tr>
            <th class="text-center">№</th>
            <th>Discription of Products / Опис продукції</th>
            <th>Quantity /</br>Кількість</br>(pcs)</th>
            <th>Unit Price /</br>Ціна за одиницю</br>(USD/pcs)</th>
            <th>Total Amount /</br>Загальна сума</br>(USD)</th>
            <th>Country of</br>origin</br>Країна</br>походження</th>
        </tr>
        {% for key, product in model.products %}
        <tr>
            <td class="text-center">{{key + 1}}</td>
            <td class="text-center">{{ product.product_name }}</td>
            <td class="text-center">{{ product.product_quantity }}</td>
            <td class="text-center">{{ product.price_sold|number_format(2, '.', '') }}</td>
            <td class="text-center">{{ (product.product_quantity * product.price_sold)|number_format(2, '.', '') }}</td>
            <td class="text-center">{{ product.product_comment }}</td>
        </tr>
        {% endfor %}
        <tr>
            <td colspan="3"><p style="font-size: 14px">Packing / Пакування:</p></td>
            <td colspan="3"><p style="font-size: 14px">{{ model.shipping_price }}</p></td>
        </tr>
        <tr>
            <td colspan="3"><p style="font-size: 14px">Commercial sample / Комерційний зразок</p></td>
            <td colspan="3" class="text-left total-cell">
                <div style="display: flex;justify-content: space-between;">
                    <p>TOTAL AMOUNT:</p>
                    <p>{{ model.total_price|number_format(2, '.', '') }} USD</p>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    </br>
    <p class="text-left" style="font-size: 20px;position: relative;right: -20%;background-color: yellow;"><strong>Name Name</strong></p>
</div>
</body>
<style>

    .page_break {
        page-break-after: always;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
        height: 100%;
    }

    body {
        font-size: 16px;
        line-height: 1.5;
        min-width: 320px;
        font-family: sans-serif;
        overflow-x: hidden;
    }

    .container {
        margin-right: auto;
        margin-left: auto;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .label {
        font-weight: bold;
    }

    .underline {
        text-decoration: underline;
        font-style: italic;
    }

    .big-text {
        font-size: 18px;
    }

    .width100 {
        width: 99%;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        height: auto;
    }

    table td {
        padding-right: 5px;
        padding-left: 5px;
        border: none;
    }

    table th {
        background: #d4d4d4;
    }

    table.border td,
    table.border th {
        border: 1px solid black;
    }

    /* table.table-products {
        border: solid 2px black;
    } */

    table.table-products th {
        padding: 5px 5px;
    }

    table.table-products td {
        padding: 5px;
    }

    table.table-sum {
        margin-top: 7px;
    }

    table.table-sum td {
        padding: 3px 5px 3px 15px;
    }

    .flex-child {
        padding: 15px;
    }

</style>
</html>
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://templates.keycrm.app/common/international.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
