# Using on Any Website

Getting your site ready to use Four Corners is a simple two step process:

## 1. Get Your Site Ready

Paste our hosted Javascript link into the bottom of your website page or template. Insert the following line at the *end* of your html, as seen below:

```html
<body>
...
...
...
<!-- Insert this line to enable 4C on your site -->
<script src="https://cdn.fourcorners.io/dist/4c.js"></script>
...
</body>
</html>
```

## 2. Generate Metadata

The Authograph overlay will dynamically adjust to the metadata you have available. 

This data is stored in a `<script>` tag embedded in the page for each image.

### Step 1 - Create Your Metadata

Using the [Online Editor](https://editor.fourcorners.io), follow the simple wizard to create and edit metadata for one of your photos.

> The simple online editor is available at **https://editor.fourcorners.io**.

Copy the `<script>` block generated by the editor when you are done.

### Step 2 - Mark Your Images

Go to the page on your website where you want the Four Corners image. 

Insert the image as normal (using your existing website editor, or by hand with an `<img>` tag).

Make sure you are in `source view` where you can see the code.

Under the `<img>` line just added, past the code from the editor.

Copy the `src="{somefilenamehere}"` part of your original `<img>` tag, and paste over the one from the editor.

You should end up with something like this:

```html
<img src="{this should be the path to your image}" data-4c="234234-234234-234234-23423423" />
<script data-4c-meta="234234-234234-234234-23423423">
...
...
</script>
```
Save your page and view in your web browser. Your image should now be augmented as a Four Corners image.

----

> Authograph is an open source initiate delivered as part of a collaboration between leading universities and journalist organisations. If you would like to find out more, please contact us directly <info@authograph.org>.  Content imagery used in the demo is photography by Eddie Adams/© Associated Press.
