Mediagraph Beta: Set up AI alt text generation with Webhooks and Zapier

Who can use this feature?

Admins

Available on all plans with a Zapier account and an Alt Text Automator plan.

Mediagraph has created a beta feature using Alt Text Automator to generate Alt Text for image files. The connection between Mediagraph and Alt Text Automator is set up using Webhooks and Zapier.

Webhooks are a way for apps to automatically send messages or information to each other. They enable different apps to communicate with each other whenever something new happens. Zapier is an application that uses webhooks to integrate your Mediagraph account with various web apps.

Watch the video below and consult the following instructions to learn how to connect Mediagraph and Alt Text Automator. 

AI alt text generation is one of the many processes that can be automated using Webhooks. This means that any time an image is added to a designated container in Mediagraph, alt-text is automatically generated for it and added to the Alternative Text metadata field.

AI alt text generation, when coupled with Mediagraph's Has Alt Text filter, allows you to easily ensure all your media is accessible to all people.

Create a Zapier Account

1. Follow this link to open the Generate Mediagraph Alt Text in Alt Text Automator template on Zapier.
2. Click Sign up and try this Zap.
3. If you already have a Zapier account, log in. If you do not, enter your name and email address, and choose a password for your new account. Click Get Started Free after each prompt. At the end of the signup process, you should be redirected back to the Mediagraph template from earlier. If not, click the link in step one again.

Set up and test a Webhook in Mediagraph and Zapier

1. In the Generate Mediagraph Alt Text in Alt Text Automator template, click 1. Catch Hook in Webhooks by Zapier to open the Trigger panel.
2. In the Test panel, copy the link under Your Webhook URL to your clipboard.
3. In another tab or window, open the Manage tab of your Mediagraph account. You will need to keep Mediagraph and Zapier open simultaneously for the rest of the setup process.
4. Select Integrations from the sidebar. 
5. Click Add New in the top right corner of the Webhooks panel.
6. Paste the URL copied from the Zapier test panel into the URL field.
7. Click Send Test.
8. Back in Zapier, click Test Trigger. If the test was successful, you should see “request A” from Mediagraph, with a message reading “Test POST.” If the test was not successful, ensure the URL copied into Mediagraph matches the URL in Zapier.
9. Back in Mediagraph, Add a Name and descriptive Note (optional) to your new webhook.
10. Click the slider to switch “Group Assets in payload?” to No.
11. Select a source container. This can be any container, but we recommend creating a new Lightbox exclusively for AI alt text generation. Make sure you label this Lightbox clearly, as all assets added to it after the webhook has been enabled will be sent out for alt text generation.
12. At the top of the page, click the enabled/disabled slider to enable your webhook.
13. Click Save Webhook.
14. Test your webhook by adding an asset to your designated source container.
15. Go back to the Test panel in Zapier.
16. Click Find New Records. You should now see Request B. If you do not, the second test was unsuccessful. Make sure you have selected the correct container when setting up your webhook in Mediagraph. 
17. Click Request B to select it. Make sure the filename matches the asset you added to the source container.
18. If the test was successful, click Continue with selected record to open the Action tab, where you can connect your webhook to Alt Text Automator.

Create an Alt Text Automator account and generate an API Key

1. In a new tab or browser window, go to Alt Text Automator's website.
2. Click Get Started for Free.
3. Follow the prompts and click Sign Up.
4. In the left-hand side panel, click API.
5. Click Go to API Keys.
6. Add a Name and click Add API Key.
7. Click the clipboard to copy the API key.

Connect your Webhook to Alt Text Automator

1. In Zapier's Account tab, click Sign in to open a pop-up where you can connect your Alt Text Automator account.
2. In the pop-up that opens, paste your API key into the field.
3. Click Yes, Continue to Alt Text Automator.
4. Click Continue.
5. In the Action tab, click the blank Image URL field.
6. Select Assets Permalink URL from the dropdown.
7. Select the Language you want to generate alt text in.
8. Click Continue.
9. Click Test Step.
10. View your generated alt text by clicking Image alt texts in Alt Text Automator's left-hand sidebar.
11. Back in Zapier, click Publish. The connection is now live, and any image you add to the source container designated earlier will be sent to Alt Text Automator.

Connect Alt Text Automator to Mediagraph

In order to have the generated alt text added automatically to the metadata in your Mediagraph account, you have to set up another Webhook with Zapier. Use the Update Alt Text in Mediagraph template to set up the final step of this integration.

1. Follow this link to open the Update Alt Text in Mediagraph template on Zapier.
2. Click Try this Zap.
3. Click 1. Catch Hook in Webhooks by Zapier to open that step's Trigger panel.
4. In the Test panel, copy the link under Your Webhook URL to your clipboard.
5. In another tab or window, open Alt Text Automator's settings page.
6. Scroll down to the webhook's section. Paste the URL from Zapier into the Webhook URL field.
7. In order to connect Zapier and Alt Text Automator, you need to trigger a new webhook. This can be done in Mediagraph by adding an image to the source container you designated above.
8. Back in Zapier, click Test Trigger.
9. Click Request A.
10. Click Continue with Selected Record to move on to Step 2.
11. Click Continue to move on to the Action panel.
12. In the Transform field, choose Extract Pattern from the dropdown.
13. In the Input field, choose Date Url from the dropdown.
14. In the Pattern field, copy and paste the following string:/([0-9a-fA-F]+)-permalink\.jpg\?
15. Click Continue.
16. Click Test Step.
17. Click Continue to move on to Step 3.
18. In the App & event panel, select Custom Request from the Event dropdown.
19. Click Continue to move on to the Action panel.
20. In the Method field, select PUT from the dropdown.
21. In the URL field, paste the following string: https://api.mediagraph.io/api/assets/{{234696091__output__0}}
22. In the Data field, paste the following string: {"asset": {"alt_text":"{{234694933__date__altText}}"}}
23. In the Unflatten field, select No.
24. In the Basic Auth field, paste a Personal Access Token. These can be generated and copied through the link at the bottom of Mediagraph's Account Settings page. The Personal Access Token must be preceded by a pipe character: |.
25. Add two new lines to the Headers field: the first one should read Content-Type, application/json. The second one should read OrganizationId, and then your Organization ID, a three digit number found at the bottom of Mediagraph's Profile Settings page.
26. Click Continue.
27. Click Test Step.
28. If the test was successful, click Publish. The integration is now live, and any images added to the source container you designated earlier will have alternative text generated and added to their metadata in Mediagraph.