Microsoft Teams Integration

Send photo submission notifications directly to your Microsoft Teams channels.

Overview

Connect Visiono to Microsoft Teams to receive instant notifications when photos are submitted. Keep your team informed without leaving their collaboration platform.

Prerequisites

• Visiono account with API access
• Microsoft Teams workspace
• Permission to add connectors to Teams channels
• API Key from Visiono (for advanced workflows)

Setup Steps

1. Create Incoming Webhook in Teams

1. Open Microsoft Teams
2. Navigate to the channel where you want notifications
3. Click the ... (more options) next to the channel name
4. Select Connectors
5. Find Incoming Webhook and click Configure
6. Give your webhook a name (e.g., "Visiono Photos")
7. Optionally upload a custom icon
8. Click Create
9. Copy the webhook URL (save this for the next step)

2. Add Webhook to Visiono

1. Go to Workspace Settings → Webhooks
2. Click Add Webhook
3. Paste the Teams webhook URL
4. Select events to trigger:
   • photo_request.submitted - When all photos are submitted
   • photo_submission.created - When a new submission arrives
5. Save the webhook

3. Test the Connection

1. Submit a test photo in Visiono
2. Check your Teams channel for the notification
3. Adjust settings as needed

Message Format

Teams will receive notifications formatted as Adaptive Cards:

{
  "@type": "MessageCard",
  "@context": "http://schema.org/extensions",
  "themeColor": "0076D7",
  "summary": "New Photo Submission",
  "sections": [{
    "activityTitle": "New photos received",
    "activitySubtitle": "From: Vehicle Inspection",
    "facts": [{
      "name": "Photos",
      "value": "5"
    }, {
      "name": "Submitted",
      "value": "2024-01-15 10:30"
    }],
    "markdown": true
  }],
  "potentialAction": [{
    "@type": "OpenUri",
    "name": "View in Dashboard",
    "targets": [{
      "os": "default",
      "uri": "https://..."
    }]
  }]
}

Advanced Integration with Power Automate

For more complex workflows, use Microsoft Power Automate:

1. Create a Power Automate Flow

1. Go to Power Automate
2. Click Create → Automated cloud flow
3. Search for When a HTTP request is received
4. Configure the HTTP trigger

2. Add Teams Actions

Popular actions:

Action	Use Case
Post message	Send to channel
Post adaptive card	Rich notification
Create channel	Organize by project
Add member	Invite stakeholders

3. Example: Rich Notification Flow

1. Trigger: HTTP request (webhook from Visiono)
2. Action: Parse JSON (extract photo data)
3. Action: Post Adaptive Card to Teams

Adaptive Card template:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "weight": "Bolder",
      "text": "New Photo Submission"
    },
    {
      "type": "FactSet",
      "facts": [
        {"title": "Request", "value": "${request_name}"},
        {"title": "Photos", "value": "${photos_count}"},
        {"title": "Submitted", "value": "${submitted_at}"}
      ]
    },
    {
      "type": "Image",
      "url": "${first_photo_url}",
      "size": "Large"
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "View Photos",
      "url": "${dashboard_url}"
    }
  ]
}

Webhook Payload

Visiono sends this data to your Teams webhook:

{
  "event": "submission.created",
  "timestamp": "2024-01-15T10:30:00Z",
  "data": {
    "submission_id": "sub_abc123",
    "permanent_link": {
      "id": "pl_xyz789",
      "slug": "vehicle-inspection",
      "name": "Vehicle Inspection"
    },
    "photos": [
      {
        "id": "photo_001",
        "url": "https://...",
        "slot": 1,
        "slot_name": "Front View"
      }
    ],
    "metadata": {
      "unique_field": "ABC-123",
      "full_name": "John Doe",
      "submitted_at": "2024-01-15T10:30:00Z"
    }
  }
}

Channel Organization

Best Practices

• Create a dedicated channel for photo notifications
• Use channel tabs to embed Visiono dashboard
• Pin important requests for visibility
• Use @mentions for urgent submissions

Channel Naming

Suggested structure:

• #visiono-photos - All submissions
• #visiono-urgent - High-priority only
• #visiono-[project] - Project-specific

Troubleshooting

Notifications Not Appearing

1. Verify webhook URL is correct in Visiono
2. Check webhook is enabled (green status)
3. Ensure Teams connector is still active
4. Test with a new submission

Webhook URL Invalid

1. Create a new Incoming Webhook in Teams
2. Update the URL in Visiono
3. Test the connection

Message Format Issues

1. Check webhook event type matches expected format
2. Verify JSON structure in Visiono webhook settings
3. Test with Power Automate for custom formatting

Security Considerations

• Webhook URLs should be kept private
• Rotate webhooks periodically
• Use private channels for sensitive data
• Review connected apps regularly

Related Resources

• Webhooks - Event configuration
• API Reference - Direct API access
• Zapier Integration - Alternative automation
• Make Integration - Visual automation