Dittofeed Web组件：Vue/Angular支持

刘童为Edmond

445人浏览 · 2025-08-31 01:45:12

刘童为Edmond · 2025-08-31 01:45:12 发布

Dittofeed Web组件：Vue/Angular支持

【免费下载链接】dittofeed Automate messages across email, SMS, webhooks, & native mobile push 📨 💬 📧 项目地址: https://gitcode.com/GitHub_Trending/di/dittofeed

痛点：多平台消息自动化集成的复杂性

在现代应用开发中，企业经常需要在Vue、Angular、React等不同前端框架中集成消息自动化功能。传统方案需要为每个平台单独开发集成代码，维护成本高且一致性难以保证。Dittofeed的嵌入式Web组件（Embedded Components）提供了统一的解决方案，让开发者能够快速在各种前端框架中集成完整的消息自动化能力。

Dittofeed嵌入式组件架构解析

Dittofeed采用基于iframe的微前端架构，通过统一的API接口为各种前端框架提供一致的嵌入体验：

mermaid

核心组件类型

Dittofeed提供以下嵌入式Web组件：

组件类型	功能描述	适用场景
Journey Editor	可视化旅程构建器	用户 onboarding、营销自动化
Segment Editor	用户分群管理	精准用户定位、个性化推送
Template Editor	消息模板设计	邮件、SMS、Webhook模板
Broadcast Manager	广播消息管理	批量消息发送、活动推广

Vue框架集成实战

安装与配置

首先在Vue项目中创建Dittofeed嵌入组件：

<template>
  <div class="dittofeed-container">
    <iframe
      :src="iframeUrl"
      width="100%"
      height="600px"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'DittofeedEmbed',
  props: {
    componentType: {
      type: String,
      required: true,
      validator: value => [
        'journeys', 'segments', 'templates', 'broadcasts', 'deliveries'
      ].includes(value)
    },
    workspaceId: {
      type: String,
      required: true
    },
    token: {
      type: String,
      required: true
    },
    itemId: {
      type: String,
      default: ''
    }
  },
  computed: {
    iframeUrl() {
      const baseUrl = 'https://app.dittofeed.com/dashboard-l/embedded'
      let url = `${baseUrl}/${this.componentType}?token=${this.token}&workspaceId=${this.workspaceId}`
      
      if (this.itemId) {
        url += `&id=${this.itemId}`
      }
      
      return url
    }
  }
}
</script>

<style scoped>
.dittofeed-container {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
</style>

会话管理服务

创建Vue服务来处理Dittofeed会话：

// services/dittofeed.service.ts
import { Injectable } from 'vue-typescript-inject'

@Injectable()
export class DittofeedService {
  private baseUrl = 'https://app.dittofeed.com/api-l'
  
  async createSession(workspaceId: string, writeKey: string): Promise<string> {
    const response = await fetch(`${this.baseUrl}/sessions`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${writeKey}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ workspaceId })
    })
    
    if (!response.ok) {
      throw new Error('Failed to create Dittofeed session')
    }
    
    const data = await response.json()
    return data.token
  }
  
  async createChildWorkspace(
    parentApiKey: string,
    parentWorkspaceId: string,
    name: string,
    externalId?: string
  ) {
    const response = await fetch(`${this.baseUrl}/admin/workspaces/child`, {
      method: 'PUT',
      headers: {
        'Authorization': `Bearer ${parentApiKey}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        name,
        externalId,
        workspaceId: parentWorkspaceId
      })
    })
    
    return response.json()
  }
}

完整使用示例

<template>
  <div>
    <h2>消息自动化面板</h2>
    <div class="tab-container">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="{ active: activeTab === tab.id }"
        @click="activeTab = tab.id"
      >
        {{ tab.label }}
      </button>
    </div>
    
    <DittofeedEmbed
      v-if="sessionToken"
      :component-type="activeTab"
      :workspace-id="workspaceId"
      :token="sessionToken"
    />
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import DittofeedEmbed from '@/components/DittofeedEmbed.vue'
import { DittofeedService } from '@/services/dittofeed.service'

export default defineComponent({
  components: { DittofeedEmbed },
  setup() {
    const dittofeedService = new DittofeedService()
    const sessionToken = ref('')
    const workspaceId = ref('your-workspace-id')
    const activeTab = ref('journeys')
    
    const tabs = [
      { id: 'journeys', label: '消息旅程' },
      { id: 'segments', label: '用户分群' },
      { id: 'templates', label: '消息模板' },
      { id: 'broadcasts', label: '广播消息' }
    ]
    
    onMounted(async () => {
      try {
        // 从后端获取session token
        const token = await dittofeedService.createSession(
          workspaceId.value, 
          'your-write-key'
        )
        sessionToken.value = token
      } catch (error) {
        console.error('Failed to initialize Dittofeed:', error)
      }
    })
    
    return { sessionToken, workspaceId, activeTab, tabs }
  }
})
</script>

Angular框架集成指南

创建Angular组件

// dittofeed-embed.component.ts
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'

@Component({
  selector: 'app-dittofeed-embed',
  template: `
    <div class="dittofeed-container">
      <iframe
        [src]="safeIframeUrl"
        width="100%"
        height="600"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </div>
  `,
  styles: [`
    .dittofeed-container {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      overflow: hidden;
      margin: 16px 0;
    }
  `]
})
export class DittofeedEmbedComponent implements OnChanges {
  @Input() componentType!: string
  @Input() workspaceId!: string
  @Input() token!: string
  @Input() itemId?: string
  
  safeIframeUrl!: string
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes['componentType'] || changes['workspaceId'] || changes['token'] || changes['itemId']) {
      this.updateIframeUrl()
    }
  }
  
  private updateIframeUrl() {
    const baseUrl = 'https://app.dittofeed.com/dashboard-l/embedded'
    let url = `${baseUrl}/${this.componentType}?token=${this.token}&workspaceId=${this.workspaceId}`
    
    if (this.itemId) {
      url += `&id=${this.itemId}`
    }
    
    this.safeIframeUrl = url
  }
}

Angular服务封装

// dittofeed.service.ts
import { Injectable } from '@angular/core'
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { Observable } from 'rxjs'

@Injectable({
  providedIn: 'root'
})
export class DittofeedService {
  private readonly baseUrl = 'https://app.dittofeed.com/api-l'
  
  constructor(private http: HttpClient) {}
  
  createSession(workspaceId: string, writeKey: string): Observable<{ token: string }> {
    const headers = new HttpHeaders({
      'Authorization': `Bearer ${writeKey}`,
      'Content-Type': 'application/json'
    })
    
    return this.http.post<{ token: string }>(
      `${this.baseUrl}/sessions`,
      { workspaceId },
      { headers }
    )
  }
  
  createChildWorkspace(
    parentApiKey: string,
    parentWorkspaceId: string,
    name: string,
    externalId?: string
  ): Observable<any> {
    const headers = new HttpHeaders({
      'Authorization': `Bearer ${parentApiKey}`,
      'Content-Type': 'application/json'
    })
    
    return this.http.put(
      `${this.baseUrl}/admin/workspaces/child`,
      { name, externalId, workspaceId: parentWorkspaceId },
      { headers }
    )
  }
}

模块配置与使用

// app.module.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HttpClientModule } from '@angular/common/http'

import { AppComponent } from './app.component'
import { DittofeedEmbedComponent } from './components/dittofeed-embed.component'
import { DittofeedService } from './services/dittofeed.service'

@NgModule({
  declarations: [
    AppComponent,
    DittofeedEmbedComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [DittofeedService],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component, OnInit } from '@angular/core'
import { DittofeedService } from './services/dittofeed.service'

@Component({
  selector: 'app-root',
  template: `
    <div class="container">
      <h2>Dittofeed消息自动化平台</h2>
      
      <nav class="tab-nav">
        <button 
          *ngFor="let tab of tabs"
          [class.active]="activeTab === tab.id"
          (click)="activeTab = tab.id"
        >
          {{ tab.label }}
        </button>
      </nav>
      
      <app-dittofeed-embed
        *ngIf="sessionToken"
        [componentType]="activeTab"
        [workspaceId]="workspaceId"
        [token]="sessionToken"
      ></app-dittofeed-embed>
    </div>
  `,
  styles: [`
    .container { padding: 20px; }
    .tab-nav { margin: 20px 0; }
    .tab-nav button {
      padding: 10px 20px;
      margin-right: 10px;
      border: 1px solid #ccc;
      background: #f5f5f5;
      cursor: pointer;
    }
    .tab-nav button.active {
      background: #007acc;
      color: white;
      border-color: #007acc;
    }
  `]
})
export class AppComponent implements OnInit {
  tabs = [
    { id: 'journeys', label: '消息旅程' },
    { id: 'segments', label: '用户分群' },
    { id: 'templates', label: '消息模板' },
    { id: 'broadcasts', label: '广播消息' }
  ]
  
  activeTab = 'journeys'
  sessionToken = ''
  workspaceId = 'your-workspace-id'
  
  constructor(private dittofeedService: DittofeedService) {}
  
  async ngOnInit() {
    try {
      const response = await this.dittofeedService.createSession(
        this.workspaceId,
        'your-write-key'
      ).toPromise()
      
      this.sessionToken = response!.token
    } catch (error) {
      console.error('Dittofeed初始化失败:', error)
    }
  }
}

安全最佳实践

令牌管理策略

mermaid

安全配置建议

令牌有效期管理：默认1小时，可根据业务需求调整
HTTPS强制使用：确保所有通信加密
CORS配置：正确设置跨域策略
密钥轮换：定期更新API密钥和write key

性能优化技巧

组件懒加载

// Vue懒加载示例
const DittofeedEmbed = defineAsyncComponent(() =>
  import('@/components/DittofeedEmbed.vue')
)

// Angular懒加载示例
const routes: Routes = [
  {
    path: 'messaging',
    loadComponent: () => 
      import('./components/dittofeed-embed.component').then(m => m.DittofeedEmbedComponent)
  }
]

iframe优化策略

优化策略	实施方法	效果
延迟加载	使用Intersection Observer	减少初始加载时间
连接复用	保持session token有效期内连接	减少认证开销
缓存策略	合理设置HTTP缓存头	提升重复访问速度

常见问题解决方案

跨域通信问题

// 处理iframe消息通信
window.addEventListener('message', (event) => {
  if (event.origin === 'https://app.dittofeed.com') {
    const data = event.data
    // 处理来自Dittofeed的消息
    if (data.type === 'journeyCreated') {
      console.log('旅程创建成功:', data.journeyId)
    }
  }
})

响应式布局适配

/* 响应式iframe容器 */
.dittofeed-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3比例 */
  overflow: hidden;
}

.dittofeed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .dittofeed-container {
    padding-bottom: 100%; /* 正方形比例 */
  }
}